/* ==========================================================================
   Design Tokens & CSS Variables (caon.jp Palette)
   ========================================================================== */
:root {
  --ink: #4c4948;                /* caon.jp ベース文字色（深みのあるチャコールグレー） */
  --green: #94bb96;              /* caon.jp メインアクセント（ボタニカルセージグリーン） */
  --green-hover: #7ea880;
  --green-dark: #2e6f54;
  --green-pale: #f4f8f4;
  --green-sub: #dfeadf;
  --ivory: #f8faea;              /* caon.jp ペールイエローグリーン（News, Healing背景） */
  --gray-light: #f5f5f5;         /* caon.jp ライトグレー（Step, Review背景） */
  --greige: #b1b0af;             /* caon.jp ウォームグレージュ（フッター上部、バッジ） */
  --border-muted: #a5a4a3;       /* caon.jp 境界線・サブテキストグレー */
  --white: #ffffff;
  --paper: #ffffff;
  --paper-deep: #f8faea;
  --line: #e6e5e3;
  --line-dark: #a5a4a3;
  --accent: #94bb96;
  --accent-dark: #2e6f54;
  --accent-soft: #f4f8f4;
  --sage: #94bb96;
  --sage-pale: #f4f8f4;
  --night: #4c4948;
  --line-cta: #94bb96;
  --line-cta-hover: #7ea880;

  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --eng: "Cormorant", serif;

  --ease: cubic-bezier(.455, .03, .515, .955);
  --shadow-card: 0 0 50px 10px rgba(0, 0, 0, .08);
  --shadow-soft: 0 4px 20px rgba(76, 73, 72, .06);
}

/* ==========================================================================
   Base & Resets
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  font-kerning: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--white);
  line-height: 2.4;
  letter-spacing: .1rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (max-width: 767.99px) {
  body {
    line-height: 2;
    letter-spacing: .08rem;
  }
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s var(--ease);
}
a:hover {
  opacity: .75;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

button, input, select, textarea {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
}
button {
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--border-muted);
  margin: 1em 0;
}

.c-hr {
  width: 40px;
  height: 1px;
  background-color: var(--ink);
  display: block;
  margin: 2rem auto;
  border: none;
}

/* Utility Classes */
.u-text-center { text-align: center; }
.u-text-left   { text-align: left; }
.u-text-right  { text-align: right; }
.u-text-bold   { font-weight: 700; }
.u-color-green { color: var(--green); }
.u-nowrap      { white-space: nowrap; display: inline-block; }

@media (min-width: 1024px) {
  .u-pc-hide { display: none !important; }
}
@media (min-width: 768px) {
  .u-pc_tab-hide { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023.99px) {
  .u-tab-hide { display: none !important; }
}
@media (max-width: 767.99px) {
  .u-sp-hide { display: none !important; }
}

.l-wrapper {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

.c-section__inner {
  width: min(100%, 1366px);
  margin: 0 auto;
  padding: 4rem 2rem;
}
@media (max-width: 1023.99px) {
  .c-section__inner {
    padding: 2.5rem 1.5rem;
  }
}

/* ==========================================================================
   Header (caon.jp .l-header)
   ========================================================================== */
.l-header, .site-header {
  width: 100%;
  height: 100px;
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 1000;
  display: grid;
  align-items: flex-start;
  padding: 0 1rem;
  transition: all .4s var(--ease);
}

.l-header::after, .site-header::after {
  content: "";
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: all .4s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, .25);
  position: absolute;
  inset: 0;
  z-index: -1;
}

.l-header__inner, .header-inner {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.l-header .logo, .site-header .brand {
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all .6s;
  flex-shrink: 0;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1;
}
.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink);
}
.brand-caption {
  font-size: .66rem;
  color: var(--border-muted);
  letter-spacing: .04em;
}

.l-header .gNav, .site-header .main-nav {
  width: 100%;
}
.l-header .gNav__lists, .site-header .main-nav {
  display: flex;
  gap: clamp(.5rem, 1.2vw, 1.6rem);
  align-items: center;
  justify-content: flex-end;
}
.l-header .gNav__elements a, .site-header .main-nav a {
  font-size: clamp(.78rem, 0.9vw, .92rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .04em;
  white-space: nowrap;
}
.l-header .gNav__elements a:hover, .site-header .main-nav a:hover {
  color: var(--green);
  opacity: 1;
}

/* Header Scroll Transitions */
.l-header.is-upMove, .site-header.is-upMove {
  position: fixed;
  height: 70px;
  top: -100px;
}
.l-header.is-downMove, .site-header.is-downMove {
  position: fixed;
  height: 70px;
  top: 0;
  background: rgba(255, 255, 255, .92);
}
.l-header.is-downMove .logo, .site-header.is-downMove .brand {
  height: 32px;
}

/* Mobile Hamburger & Drawer Menu */
.menu_btn, .menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
  position: relative;
  width: 2.2rem;
  height: 2.4rem;
  cursor: pointer;
  z-index: 1001;
}
.menu_btn::before, .menu_btn::after,
.menu-toggle span {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1.5px;
  background-color: var(--ink);
  transition: transform .25s ease, opacity .25s ease;
  left: 0;
}
.menu_btn::before { top: calc(50% - 5px); }
.menu_btn::after  { top: calc(50% + 5px); }
.menu-toggle span:nth-child(1) { top: calc(50% - 5px); }
.menu-toggle span:nth-child(2) { top: 50%; opacity: 0; }
.menu-toggle span:nth-child(3) { top: calc(50% + 5px); }

.drawer, .mobile-nav {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  width: 100%;
  height: 100dvh;
  position: fixed;
  inset: 0;
  z-index: 2000;
  color: var(--white);
  padding: 1.5rem 1.5rem 2rem;
  transform: translateX(100%);
  transition: transform .5s var(--ease);
  overflow-y: auto;
}
.drawer.is-open, .mobile-nav.is-open {
  transform: translateX(0);
}
.drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 2rem;
  flex-shrink: 0;
}
.drawer .logo, .mobile-nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  margin: 0;
}
.drawer .brand-name { color: var(--white); }
.drawer .brand-caption { color: rgba(255, 255, 255, .7); }
.drawer .menu_close {
  display: block;
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
}
.drawer .menu_close::before, .drawer .menu_close::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1.5px;
  background: var(--white);
  top: 50%;
  left: 0;
}
.drawer .menu_close::before { transform: rotate(45deg); }
.drawer .menu_close::after  { transform: rotate(-45deg); }

.drawer .gNav, .mobile-nav .gNav {
  margin: 0;
  width: 100%;
}
.drawer .gNav__lists, .mobile-nav .gNav__lists {
  display: grid;
  gap: 1.25rem;
}
.drawer .gNav__elements a, .mobile-nav a {
  color: var(--white);
  font-size: clamp(1.05rem, 4.5vw, 1.25rem);
  font-weight: 500;
  letter-spacing: .08em;
  display: inline-block;
}
.drawer .copyright {
  margin-top: auto;
  padding-top: 2rem;
  text-align: center;
  width: 100%;
  font-size: .75rem;
  color: rgba(255, 255, 255, .6);
  position: static;
  flex-shrink: 0;
}

@media (max-width: 1023.99px) {
  .l-header, .site-header {
    height: 75px;
    align-items: center;
  }
  .l-header .gNav, .site-header .main-nav, .header-link {
    display: none;
  }
  .menu_btn, .menu-toggle {
    display: block;
    margin-left: auto;
  }
}

/* ==========================================================================
   Buttons (caon.jp .c-button)
   ========================================================================== */
.c-button {
  position: relative;
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 100rem;
  border: 2px solid var(--green);
  background-color: var(--green);
  color: var(--white);
  padding: 1rem 1.8rem;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  font-weight: 500;
  letter-spacing: .1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(148, 187, 150, .35);
  transition: all .25s var(--ease);
}
.c-button:hover {
  background-color: var(--white);
  color: var(--green);
  border-color: var(--green);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(148, 187, 150, .45);
}
.c-button svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  flex-shrink: 0;
}

.c-button.-small {
  padding: .5rem 1.4rem;
  font-size: clamp(.82rem, 1vw, .95rem);
  box-shadow: none;
}
.c-button.-white {
  background-color: var(--white);
  color: var(--green);
}
.c-button.-white:hover {
  background-color: var(--green);
  color: var(--white);
}
.c-button.-full {
  width: 100%;
}

.c-button-text {
  color: var(--green);
  position: relative;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 500;
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
}
.c-button-text::before, .c-button-text::after {
  content: "";
  width: 1px;
  height: 20px;
  display: inline-block;
  background-color: var(--green);
  margin: 0 1rem;
}
.c-button-text::before { transform: rotate(-20deg); }
.c-button-text::after  { transform: rotate(20deg); }

.c-wrap-button__center {
  text-align: center;
  margin: 3.5rem auto 0;
}

.c-button__shop {
  border-radius: 100px;
  border: 1px solid var(--white);
  padding: .45rem 1.2rem;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  font-size: clamp(.85rem, 1vw, 1rem);
  gap: 8px;
}
.c-button__shop:hover {
  background: rgba(255, 255, 255, .15);
  opacity: 1;
}

.c-button__more {
  display: inline-block;
  width: min(100%, 95px);
}

/* ==========================================================================
   Fixed Side Ornaments (.global_copy, .page_scroll)
   ========================================================================== */
.global_copy {
  position: fixed;
  z-index: 996;
  pointer-events: none;
  width: 1500px;
  display: flex;
  align-items: center;
  padding: 2rem 0 2rem 1rem;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.global_copy svg, .global_copy img {
  width: .9rem;
  height: auto;
  opacity: .75;
}
@media (max-width: 1023.99px) {
  .global_copy { display: none; }
}

.page_scroll {
  width: 1500px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;
  padding: 27rem 1rem 2rem 0;
}
.page_scroll .scroller {
  position: relative;
  display: block;
  width: 1px;
  height: 150px;
  margin-left: auto;
  margin-right: 0;
  pointer-events: auto;
  cursor: pointer;
  background-color: var(--gray-light);
}
.page_scroll .scroller::after {
  content: "";
  color: var(--ink);
  width: 12px;
  height: 12px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 10px)) rotate(45deg);
}
.page_scroll .scroller .scroller__bar {
  position: absolute;
  top: 0;
  width: 1px;
  height: 70px;
  background-color: var(--greige);
}
@media (max-width: 1023.99px) {
  .page_scroll { display: none; }
}

/* ==========================================================================
   Headings (.c-heading__h1, h2, h3)
   ========================================================================== */
.c-heading__h1 {
  font-family: var(--serif);
  margin-bottom: 2rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: .2rem;
}
.c-heading__h2 {
  font-family: var(--serif);
  margin-bottom: 2rem;
  font-weight: 500;
  letter-spacing: .2rem;
}
.c-heading__h2 span {
  display: block;
  font-weight: 400;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: .15rem;
  color: var(--green);
  margin-bottom: .4rem;
}
.c-heading__h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin-bottom: 2rem;
  letter-spacing: .15rem;
}
.c-heading__round {
  background-color: var(--greige);
  color: var(--white);
  display: inline-block;
  padding: .5rem 2rem;
  border-radius: 100px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
}

@media (max-width: 767.99px) {
  .c-heading__h2 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    line-height: 1.4;
  }
  .c-heading__h3 {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
    line-height: 1.6;
  }
  .c-heading__sp-border {
    border-bottom: 1px solid var(--border-muted);
    padding-bottom: 1rem !important;
  }
}

/* ==========================================================================
   1. MV (Hero) Section - caon.jp Reference Layout with Clean Negative Space
   ========================================================================== */
.page-home .mv {
  position: relative;
  background-color: #f6f6f7;
  padding-top: 70px;
  padding-bottom: 0;
  overflow: hidden;
}

.mv__stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  line-height: 0;
}

.mv__stage-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom center;
  opacity: 1;
  transform: translateY(0);
}
.page-home .mv.is-active .mv__stage-img {
  opacity: 1;
  transform: translateY(0);
}

/* Overlaid Typography directly on the Clean White Negative Space (No Watermarks/Overlay) */
.page-home .mv__text {
  position: absolute;
  top: 9%;
  right: 4%;
  width: min(46.5vw, 650px);
  text-align: left;
  z-index: 5;
  line-height: normal;
  opacity: 1;
  transform: translateY(0);
}
.page-home .mv.is-active .mv__text {
  opacity: 1;
  transform: translateY(0);
}

.mv__note {
  font-size: 0.78rem;
  color: var(--border-muted);
  margin-top: 0.45rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.mv__tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: clamp(0.75rem, 0.88vw, 0.86rem);
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.14em;
  margin-bottom: clamp(0.85rem, 1.3vw, 1.25rem);
  background: rgba(148, 187, 150, 0.12);
  padding: 5px 16px;
  border-radius: 100px;
  border: 1px solid rgba(148, 187, 150, 0.35);
}

.mv__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.11em;
  line-height: 1.75;
  margin-bottom: clamp(1rem, 1.5vw, 1.55rem);
}
.mv__title .u-nowrap {
  white-space: nowrap;
  display: inline-block;
}

.mv__action {
  margin-bottom: clamp(0.85rem, 1.2vw, 1.25rem);
}
.mv__action .c-button {
  padding: clamp(0.8rem, 0.95vw, 0.95rem) clamp(1.8rem, 2.3vw, 2.4rem);
  font-size: clamp(0.88rem, 0.96vw, 0.96rem);
  box-shadow: 0 4px 18px rgba(148, 187, 150, 0.35);
}

.mv__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.82rem;
  color: var(--border-muted);
  letter-spacing: 0.05em;
}
.mv__specs li {
  display: inline-flex;
  align-items: center;
}
.mv__specs li:not(:last-child)::after {
  content: "・";
  margin-left: 1.4rem;
  color: var(--greige);
}

/* Mobile responsive */
@media (max-width: 1023.99px) {
  .page-home .mv {
    padding-top: 85px;
    background-color: #ffffff;
  }
  .mv__stage {
    display: flex;
    flex-direction: column-reverse;
  }
  .page-home .mv__text {
    position: static;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 1rem;
    text-align: center;
    transform: none;
    opacity: 1;
  }
  .mv__title {
    font-size: clamp(1.4rem, 6vw, 1.85rem);
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin-bottom: 1.4rem;
  }
  .mv__action .c-button {
    width: 100%;
    max-width: 360px;
  }
  .mv__specs {
    justify-content: center;
    gap: 0.4rem 1rem;
    font-size: 0.78rem;
  }
  .mv__specs li:not(:last-child)::after {
    margin-left: 1rem;
  }
  .mv__stage-img {
    border-radius: 8px;
    padding: 0 1rem;
    transform: none;
    opacity: 1;
  }
}

/* ==========================================================================
   Hero Lead Section (.hero-lead: ほかの訴求・共感リード文)
   ========================================================================== */
.hero-lead {
  background-color: var(--white);
  padding: 4.5rem 0 3.5rem;
  text-align: center;
  position: relative;
  z-index: 2;
}
.hero-lead .c-section__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 2rem;
}
.hero-lead__heading {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  font-weight: 500;
  line-height: 1.85;
  color: var(--ink);
  margin: 1.2rem auto 1.5rem;
  letter-spacing: 0.08em;
  text-align: center;
}
.hero-lead__heading .u-nowrap {
  white-space: nowrap;
  display: inline-block;
}
.hero-lead__text {
  font-size: clamp(0.92rem, 1.15vw, 1.05rem);
  line-height: 2.3;
  color: var(--ink);
  opacity: 0.92;
  text-align: center;
  letter-spacing: 0.06em;
  word-break: auto-phrase;
  max-width: 860px;
  margin: 0 auto;
}
@media (max-width: 767.99px) {
  .hero-lead {
    padding: 3rem 0 2rem;
  }
  .hero-lead .c-section__inner {
    padding: 0 1.25rem;
  }
  .hero-lead__heading {
    text-align: left;
    font-size: 1.25rem;
    line-height: 1.7;
  }
  .hero-lead__text {
    font-size: 0.88rem;
    line-height: 2;
  }
}

/* ==========================================================================
   2. Swiper / Cards Carousel (.swiper)
   ========================================================================== */
.page-home .swiper {
  margin-top: -6rem;
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 10;
  padding: 0 1rem 4rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
@media (max-width: 1023.99px) {
  .page-home .swiper {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    padding: 0 1.25rem 3.5rem;
    overflow: hidden;
  }
}

.swiper-wrapper {
  display: flex;
  align-items: stretch;
  transition: transform .4s ease;
  gap: 24px;
}
.swiper-slide {
  flex: 0 0 min(100%, 705px);
  max-width: 705px;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 0 50px 10px rgba(0, 0, 0, .09);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
@media (max-width: 767.99px) {
  .swiper-slide {
    flex: 0 0 min(86vw, 340px);
    max-width: min(86vw, 340px);
  }
}
.swiper-slide-content {
  padding: 32px 36px;
  text-align: left;
}
@media (max-width: 767.99px) {
  .swiper-slide-content {
    padding: 24px 20px;
  }
}
.swiper-slide-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--green-pale);
  color: var(--green);
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.swiper-slide-title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 10px;
}
.swiper-slide-desc {
  font-size: .88rem;
  color: var(--ink);
  line-height: 1.9;
  opacity: .9;
}

.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: 45%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
  color: var(--ink);
  transition: all .2s;
}
.swiper-button-prev:hover, .swiper-button-next:hover {
  background: var(--green);
  color: var(--white);
}
.swiper-button-prev { left: 10px; }
.swiper-button-next { right: 10px; }
.swiper-button-prev svg, .swiper-button-next svg { width: 14px; height: 14px; }

.swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1.5rem;
}
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--greige);
  cursor: pointer;
  transition: all .2s;
}
.swiper-pagination-bullet-active {
  background: var(--green);
  width: 24px;
  border-radius: 5px;
}

/* ==========================================================================
   3. News / Latest Column Section (.c-news)
   ========================================================================== */
.page-home .c-news {
  background-color: var(--ivory);
  padding: 5rem 2rem 3.5rem;
  position: relative;
  z-index: 2;
}
.page-home .c-news .c-section__inner {
  width: min(100%, 1000px);
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 0 3rem;
  padding: 0;
}
.c-news__heading {
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-family: var(--eng);
  letter-spacing: .2rem;
  text-transform: uppercase;
  color: var(--ink);
}
.c-news .news__elements a,
.c-news .column-card-body {
  font-size: .95rem;
  line-height: 1.8;
  gap: 24px;
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  padding: 18px 2rem 18px 0;
  border-bottom: 1px solid var(--border-muted);
  position: relative;
  letter-spacing: .06em;
}
.c-news .column-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
  border-top: 1px solid var(--border-muted);
}
.c-news .column-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.c-news .column-card:hover {
  transform: none;
  box-shadow: none;
}
.c-news .column-card-title {
  margin-bottom: 0;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
}
.c-news .column-card-meta {
  margin-bottom: 0;
  gap: 0;
}
.c-news .column-card-category { display: none; }
.c-news .column-card-desc { display: none; }
.c-news .news__elements time,
.c-news .column-card-meta time {
  font-family: var(--eng);
  font-size: 1.05rem;
  color: var(--ink);
}
.c-news .news__elements a::after,
.c-news .column-card-body::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid var(--green);
  border-right: 1.5px solid var(--green);
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 767.99px) {
  .page-home .c-news { padding: 4rem 1.5rem 2rem; }
  .page-home .c-news .c-section__inner { display: block; }
  .c-news__heading { margin-bottom: 1.5rem; text-align: center; }
  .c-news .news__elements a,
  .c-news .column-card-body {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 1.5rem 12px 0;
    font-size: .88rem;
  }
}

/* ==========================================================================
   4. About Section (.about)
   ========================================================================== */
.page-home .about {
  margin-top: 6rem;
  margin-bottom: 6rem;
}
.page-home .about .c-heading__h2 {
  position: relative;
  text-align: center;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  line-height: 2.2;
  white-space: nowrap;
}
.page-home .about .c-heading__h2::after {
  content: "";
  display: block;
  position: absolute;
  width: 120px;
  height: 120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%2394bb96' stroke-width='1.5'%3E%3Cpath d='M20,80 Q50,20 80,40 Q60,70 20,80 Z' fill='%23f4f8f4'/%3E%3Cpath d='M30,70 Q50,40 70,50'/%3E%3C/svg%3E") no-repeat center/contain;
  top: -20px;
  right: -90px;
  opacity: .8;
}
@media (max-width: 767.99px) {
  .page-home .about .c-heading__h2::after { display: none; }
}

.page-home .about .about__img {
  margin: 3.5rem auto 4rem;
  max-width: 1100px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.page-home .about .about__img img {
  width: 100%;
  height: auto;
  display: block;
}
.page-home .about .c-heading__h3 {
  text-align: center;
  font-size: clamp(1.7rem, 2.3vw, 2.2rem);
  line-height: 2.1;
}
.page-home .about .c-heading__h3 .u-nowrap {
  white-space: nowrap;
  display: inline-block;
}
.page-home .about .about__text {
  text-align: center;
  margin-top: 2rem;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  line-height: 2.3;
  letter-spacing: 0.06em;
  word-break: auto-phrase;
}
@media (max-width: 767.99px) {
  .page-home .about .c-heading__h3 { text-align: left; font-size: 1.35rem; line-height: 1.8; }
  .page-home .about .about__text { text-align: left; font-size: .92rem; line-height: 2; }
}

/* ==========================================================================
   5. Step (Flow) Section (.step)
   ========================================================================== */
.page-home .step {
  margin-top: 10rem;
  padding-bottom: min(14vw, 10rem);
  background-color: var(--gray-light);
  position: relative;
}
.page-home .step__line {
  height: 140px;
  width: 140px;
  text-align: center;
  margin: 0 auto;
  transform: translateY(-50%);
}
.page-home .step__line svg {
  width: 100%;
  height: 100%;
}
.page-home .step .c-heading__h3 {
  text-align: center;
  font-size: clamp(1.8rem, 2.3vw, 2.2rem);
  letter-spacing: .25rem;
  margin-bottom: 6rem;
  line-height: 1.8;
}

.page-home .step__lists {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7rem 4.5rem;
  max-width: 1120px;
  margin: 0 auto;
}
.page-home .step__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "icon sub" "icon lead" "text text";
  column-gap: 2rem;
  row-gap: .5rem;
}
.page-home .step__item .icon {
  grid-area: icon;
  width: 130px;
  height: 130px;
}
.page-home .step__item .sub {
  grid-area: sub;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: .08em;
}
.page-home .step__item .lead {
  grid-area: lead;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
  align-self: center;
}
.page-home .step__item .step__text {
  grid-area: text;
  margin-top: 1rem;
  font-size: .95rem;
  line-height: 2.1;
  color: var(--ink);
}

@media (max-width: 1023.99px) {
  .page-home .step__lists { gap: 4rem 2.5rem; }
  .page-home .step__item { grid-template-columns: 100px 1fr; }
  .page-home .step__item .icon { width: 90px; height: 90px; }
  .page-home .step__item .lead { font-size: 1.15rem; }
}
@media (max-width: 767.99px) {
  .page-home .step { margin-top: 6rem; }
  .page-home .step .c-heading__h3 { font-size: 1.35rem; text-align: left; margin-bottom: 3rem; }
  .page-home .step__lists { grid-template-columns: 1fr; gap: 3rem; }
  .page-home .step__item { grid-template-columns: 80px 1fr; }
  .page-home .step__item .icon { width: 75px; height: 75px; }
  .page-home .step__item .lead { font-size: 1.05rem; }
  .page-home .step__item .step__text { font-size: .88rem; }
}

/* ==========================================================================
   6. Healing (3 Supports & Specialty) Sections
   ========================================================================== */
.page-home .healing-top {
  background: var(--ivory);
  position: relative;
  padding: 8rem 0 6rem;
}
.page-home .healing-top .c-section__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 5rem 2rem;
  padding: 0;
}
.page-home .healing-top .healing__head {
  position: relative;
}
.page-home .healing-top .healing__title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  line-height: 1.7;
  color: var(--ink);
}
.page-home .healing-top .healing__title svg {
  width: 68px;
  height: 32px;
  color: var(--green);
  margin-bottom: 1.2rem;
}
.page-home .healing-top .healing__text {
  font-size: 1.05rem;
  line-height: 2.3;
}
.page-home .healing-top .healing__lists {
  grid-column: 1 / 3;
  display: grid;
  gap: 2.2rem;
  margin-top: 2rem;
}
.page-home .healing-top .healing__elements {
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  letter-spacing: .12em;
}
.page-home .healing-top .healing__elements svg {
  width: 60px;
  height: 28px;
  color: var(--green);
  flex-shrink: 0;
}

@media (max-width: 767.99px) {
  .page-home .healing-top { padding: 4rem 1.5rem 3rem; }
  .page-home .healing-top .c-section__inner { grid-template-columns: 1fr; gap: 2rem; }
  .page-home .healing-top .healing__lists { grid-column: auto; gap: 1.5rem; }
  .page-home .healing-top .healing__elements { font-size: 1.05rem; }
  .page-home .healing-top .healing__elements svg { width: 2.6rem; height: 1rem; }
}

/* Healing 1: Crossfade Photo & Before/After */
.page-home .healing-1 {
  position: relative;
  color: var(--white);
  overflow: hidden;
}
.page-home .healing-1::before,
.page-home .healing-1::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.page-home .healing-1::before {
  background-image: linear-gradient(rgba(44, 40, 38, .75), rgba(44, 40, 38, .75)), url("../images/top/about-interview.webp");
}
.page-home .healing-1::after {
  background-image: linear-gradient(rgba(44, 40, 38, .75), rgba(44, 40, 38, .75)), url("../images/top/specialty-salon.webp");
  animation: bgFade 8s ease-in-out infinite alternate;
}
@keyframes bgFade {
  0%   { opacity: 0; }
  25%  { opacity: 0; }
  75%  { opacity: 1; }
  100% { opacity: 1; }
}

.page-home .healing-1 .c-section__inner {
  position: relative;
  z-index: 2;
  padding-top: 8rem;
  padding-bottom: 7rem;
}
.page-home .healing-1 .healing__head {
  max-width: 620px;
  margin-left: auto;
  margin-right: 2rem;
  text-align: left;
}
.page-home .healing-1 .healing__title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1.8;
  color: var(--white);
}
.page-home .healing-1 .healing__title svg {
  width: 68px;
  height: 32px;
  margin-bottom: 1.5rem;
  color: var(--green);
}
.page-home .healing-1 .healing__text {
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 2.2;
  color: rgba(255, 255, 255, .9);
}

.page-home .healing-1 .healing__detail {
  background-color: rgba(0, 0, 0, .25);
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.page-home .healing-1 .healing__detail__inner {
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: 3rem 2rem;
}

/* Copywriting Before / After Showcase */
.copywriting-ba-grid {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr;
  gap: 20px;
  align-items: center;
  margin-top: 1.5rem;
}
.copywriting-box {
  padding: 24px;
  background: var(--white);
  border-radius: 6px;
  color: var(--ink);
}
.copywriting-box.copywriting-after {
  border: 2px solid var(--green);
  background: #fbfdfb;
}
.copywriting-label {
  display: inline-block;
  padding: 3px 10px;
  background: var(--gray-light);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 700;
  border-radius: 3px;
  margin-bottom: 10px;
}
.copywriting-label-after {
  background: var(--green);
  color: var(--white);
}
.copywriting-raw {
  font-size: .86rem;
  line-height: 1.9;
}
.copywriting-polished {
  font-size: .88rem;
  line-height: 1.95;
}
.copywriting-arrow {
  color: var(--green);
  font-size: 1.8rem;
  font-weight: 700;
}
@media (max-width: 767.99px) {
  .copywriting-ba-grid { grid-template-columns: 1fr; }
  .copywriting-arrow { text-align: center; transform: rotate(90deg); }
}

/* Healing 2: Specialty Models Accordion (.select-season) */
.page-home .healing-2 {
  position: relative;
  padding: 8rem 0;
  background: var(--white);
}
.page-home .healing-2 .c-section__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem 2rem;
  padding: 0;
}
.page-home .healing-2 .healing__title {
  grid-column: 1 / 3;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  line-height: 1.8;
}
.page-home .healing-2 .healing__title svg {
  width: 68px;
  height: 32px;
  color: var(--green);
  margin-bottom: 1.2rem;
}

/* Card Accordion (.select-season) */
.select-season {
  grid-column: 1 / 3;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  width: 100%;
  margin: 2.5rem 0;
}
.select-season .card {
  width: 75px;
  transition: all .65s var(--ease);
}
.select-season .card__box {
  height: min(32vw, 520px);
  width: 100%;
  position: relative;
  border-radius: 2rem;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
  transition: all .65s var(--ease);
}
.select-season .card__title {
  color: var(--ink);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-family: var(--serif);
  font-weight: 500;
  position: absolute;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  white-space: nowrap;
  top: 50%;
  left: 50%;
  z-index: 2;
  letter-spacing: .15em;
  transition: all .65s var(--ease);
}
.select-season .card__detail {
  width: 100%;
  background-color: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  position: absolute;
  bottom: 0;
  opacity: 0;
  padding: 1.5rem 2rem;
  transition: all .8s;
  pointer-events: none;
}
.select-season .card__detail dt {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.3vw, 1.25rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .4rem;
}
.select-season .card__detail dd {
  font-size: .88rem;
  line-height: 1.8;
  color: var(--ink);
}
.select-season .card__white {
  opacity: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .82);
  transition: all .6s .2s;
}
.select-season .card__caption {
  text-align: center;
  font-size: .75rem;
  margin-top: .6rem;
  color: var(--border-muted);
}

/* Active Expanded State */
.select-season .is-active {
  width: 44vw;
}
.select-season .is-active .card__title {
  color: var(--white);
  font-size: clamp(1.4rem, 2vw, 2.2rem);
  transform: rotate(0) translate(0, 0);
  top: 2rem;
  left: 2rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.select-season .is-active .card__detail {
  opacity: 1;
  pointer-events: auto;
}
.select-season .is-active .card__white {
  opacity: 0;
}

@media (max-width: 767.99px) {
  .select-season {
    flex-direction: column;
    gap: 8px;
  }
  .select-season .card {
    width: 100%;
  }
  .select-season .card__box {
    height: 48px;
    border-radius: 10px;
  }
  .select-season .card__title {
    font-size: .92rem;
    transform: translate(0, -50%);
    top: 50%;
    left: 1.5rem;
  }
  .select-season .card__caption { display: none; }
  .select-season .is-active {
    width: 100%;
  }
  .select-season .is-active .card__box {
    height: auto;
    min-height: 290px;
  }
  .select-season .is-active .card__title {
    font-size: 1.25rem;
    top: 1.2rem;
    left: 1.2rem;
  }
  .select-season .card__detail {
    padding: 1.2rem;
  }
}

/* Healing 3: LINE Funnel & Support */
.page-home .healing-3 {
  background-color: var(--ivory);
  position: relative;
  padding: 8rem 0;
}
.page-home .healing-3 .c-section__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem 4.5rem;
  align-items: center;
  padding: 0;
}
.page-home .healing-3__img {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.page-home .healing-3__img img {
  width: 100%;
  height: auto;
}
.page-home .healing-3 .healing__title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  line-height: 1.8;
}
.page-home .healing-3 .healing__title svg {
  width: 68px;
  height: 32px;
  color: var(--green);
  margin-bottom: 1.2rem;
}
.page-home .healing-3 .healing__text {
  font-size: 1rem;
  line-height: 2.3;
  margin-top: 1.5rem;
}
.page-home .healing-3 .healing__caption {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  background-color: rgba(255, 255, 255, .55);
  border-radius: 6px;
  padding: 1.2rem 1.8rem;
  margin-top: 2rem;
}
.page-home .healing-3 .healing__caption .image {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.page-home .healing-3 .healing__caption .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-home .healing-3 .healing__caption .text {
  font-size: .88rem;
  line-height: 1.9;
}

@media (max-width: 767.99px) {
  .page-home .healing-3 { padding: 4rem 1.5rem; }
  .page-home .healing-3 .c-section__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ==========================================================================
   7. First-Visit (初めての方へ・比較表・安心の約束)
   ========================================================================== */
.page-home .first-visit {
  padding-top: 8rem;
  padding-bottom: 8rem;
  background: var(--white);
}
.page-home .first-visit__head-img {
  width: 70px;
  margin: 0 auto 2.5rem;
}
.page-home .first-visit .c-heading__h2 {
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  text-align: center;
}
.page-home .first-visit .c-heading__h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  text-align: center;
  max-width: 800px;
  margin: 1.5rem auto 3rem;
  line-height: 2;
}
.page-home .first-visit__detail-img {
  max-width: 1080px;
  margin: 3rem auto;
}

.comparison-scroll-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--green);
  font-weight: 500;
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
}

/* Comparison Table Styling */
.comparison-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-muted);
  border-radius: 6px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  margin-top: 2rem;
}
.comparison-table {
  width: 100%;
  min-width: 740px;
  border-collapse: collapse;
}
.comparison-table th, .comparison-table td {
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
  line-height: 1.7;
}
.comparison-table thead th {
  background: var(--ink);
  color: var(--white);
  font-weight: 500;
  letter-spacing: .06em;
}
.comparison-table thead th.your-service {
  background: var(--green);
  color: var(--white);
}
.comparison-table tbody th {
  background: var(--gray-light);
  font-weight: 700;
}
.comparison-table tbody td.your-service {
  background: var(--green-pale);
  font-weight: 700;
  border-left: 2px solid var(--green);
  border-right: 2px solid var(--green);
}
.comparison-table td small {
  display: block;
  font-size: .72rem;
  color: var(--border-muted);
  font-weight: 400;
}

/* Attention & FAQ Block (.first-visit__attention) */
.page-home .first-visit__attention {
  margin: 6rem auto 3rem;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: 2.5rem;
  align-items: start;
  line-height: 2.1;
}
.page-home .first-visit__attention dt {
  border-right: 1px solid var(--border-muted);
  padding: 1rem 2rem 1rem 0;
  font-weight: 500;
  font-size: 1.25rem;
  font-family: var(--serif);
  color: var(--ink);
}
.page-home .first-visit__attention dd {
  font-size: .95rem;
  color: var(--ink);
}

@media (max-width: 767.99px) {
  .page-home .first-visit { padding: 4rem 1.5rem; }
  .page-home .first-visit__attention { grid-template-columns: 1fr; margin-top: 3rem; gap: 1rem; }
  .page-home .first-visit__attention dt { border-right: none; border-bottom: 1px solid var(--border-muted); padding: 0 0 .8rem; font-size: 1.05rem; }
}

/* FAQ Accordion Styling inside First-Visit */
.faq-list {
  display: grid;
  gap: 12px;
  margin-top: 1.5rem;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  overflow: hidden;
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  font-size: .92rem;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  background: var(--gray-light);
}
.faq-question b {
  color: var(--green);
  margin-right: 8px;
}
.faq-question i {
  font-style: normal;
  color: var(--green);
  font-size: 1.2rem;
  transition: transform .25s ease;
}
.faq-item.is-open .faq-question i {
  transform: rotate(45deg);
}
.faq-answer {
  display: none;
  padding: 16px 20px 20px;
  font-size: .88rem;
  line-height: 2;
  color: var(--ink);
}
.faq-item.is-open .faq-answer {
  display: block;
}

/* ==========================================================================
   8. Review & Price Section (.review)
   ========================================================================== */
.page-home .review {
  background-color: var(--gray-light);
  padding: 100px 2rem;
  text-align: center;
}
.page-home .review__top-text {
  padding: .5rem 2.5rem;
  background-color: var(--border-muted);
  display: inline-block;
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 50px;
  margin-bottom: 2.5rem;
  letter-spacing: .08em;
}
.page-home .review .head__main {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.4vw, 2.2rem);
  line-height: 2.2;
  letter-spacing: .15rem;
}
.page-home .review .head__sub {
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  margin: 1rem auto 2.5rem;
  max-width: 650px;
  color: var(--border-muted);
}
.page-home .review .head .star__title {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  justify-content: center;
  font-family: var(--serif);
  font-size: clamp(4.5rem, 6.5vw, 6.5rem);
  font-weight: 500;
  color: var(--green);
  line-height: 1;
  margin-bottom: 2rem;
}
.page-home .review .head .star__title span {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 400;
  color: var(--ink);
}

/* Line Micro-Offer & QR */
.line-micro-box {
  max-width: 680px;
  margin: 3rem auto 0;
  padding: 2.5rem;
  background: var(--white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  text-align: center;
  border: 1px solid var(--line);
}
.line-micro-box h4 {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: .8rem;
}
.line-micro-box p {
  font-size: .88rem;
  line-height: 1.9;
  color: var(--ink);
}
.line-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1.5rem auto;
}
.line-qr-wrap img {
  width: 150px;
  height: 150px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}
.line-qr-wrap small {
  margin-top: 6px;
  font-size: .72rem;
  color: var(--border-muted);
}

@media (max-width: 767.99px) {
  .page-home .review {
    padding: 60px 1.25rem;
  }
  .page-home .review .head .star__title {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(3rem, 11vw, 4rem);
    margin-bottom: 1.5rem;
  }
  .line-micro-box {
    padding: 2rem 1.25rem;
  }
}

/* Mobile Fixed Sticky CTA Button */
.mobile-fixed-cta {
  display: none;
  position: fixed;
  right: 1.25rem;
  bottom: 1.5rem;
  z-index: 990;
  background-color: var(--green);
  color: var(--white);
  padding: 0.75rem 1.35rem;
  border-radius: 100px;
  box-shadow: 0 4px 16px rgba(148, 187, 150, .45);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  align-items: center;
  gap: 0.5rem;
  transition: opacity .3s, transform .3s;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}
.mobile-fixed-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-fixed-cta svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}
@media (max-width: 1023.99px) {
  .mobile-fixed-cta {
    display: inline-flex;
  }
}

/* ==========================================================================
   9. Footer (.l-footer)
   ========================================================================== */
.l-footer {
  color: var(--white);
  font-size: .9rem;
  position: relative;
}
.l-footer__inner {
  width: min(1440px, 100%);
  margin: 0 auto;
}

/* Footer Top (.l-footer__top) */
.l-footer__top {
  background-color: var(--greige);
}
.l-footer__top .l-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
}
.l-footer__top .l-footer__heading {
  line-height: 1.6;
  font-weight: 500;
  font-size: .95rem;
}
.l-footer-shop {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Footer Bottom (.l-footer__bottom) */
.l-footer__bottom {
  background-color: var(--ink);
  color: var(--border-muted);
}
.l-footer__bottom a, .l-footer__bottom button {
  color: var(--border-muted);
  cursor: pointer;
}
.l-footer__bottom a:hover, .l-footer__bottom button:hover {
  color: var(--white);
}
.l-footer__bottom .l-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "menu parts company" "nav nav copyright";
  padding: 3rem 2rem 2.5rem;
  gap: 2rem 3rem;
}
.l-footer__bottom .l-footer__heading {
  font-weight: 700;
  line-height: 1.6;
  color: var(--white);
  margin-bottom: .8rem;
}
.l-footer__bottom .l-footer-menu { grid-area: menu; }
.l-footer__bottom .l-footer-parts { grid-area: parts; }
.l-footer__bottom .l-footer-company { grid-area: company; }
.l-footer__bottom .l-footer-nav { grid-area: nav; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 1.5rem; }
.l-footer__bottom .copyright { grid-area: copyright; text-align: right; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 1.5rem; }

.l-footer__bottom .l-footer-nav .gNav__lists {
  display: flex;
  gap: 2rem;
}
.l-footer__bottom .l-footer__elements {
  margin-top: .4rem;
  font-size: .84rem;
}
.l-footer__bottom .l-footer-menu .l-footer__elements::before,
.l-footer__bottom .l-footer-parts .l-footer__elements::before {
  content: "・";
}

@media (max-width: 767.99px) {
  .l-footer__top .l-footer__inner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  .l-footer__bottom .l-footer__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "menu" "parts" "company" "copyright";
    padding: 2.5rem 1.5rem;
  }
  .l-footer__bottom .l-footer-nav { display: none; }
  .l-footer__bottom .copyright { text-align: center; }
}

/* ==========================================================================
   10. Scroll Animations (.js-observer)
   ========================================================================== */
.js-observer {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .7s .2s var(--ease), transform .7s .2s var(--ease);
}
.js-observer.is-observered {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   11. Modals (Legal & Information)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(44, 40, 38, .65);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  backdrop-filter: blur(4px);
}
.modal-backdrop.is-active {
  opacity: 1;
  visibility: visible;
}
.modal-content {
  width: min(100%, 620px);
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px 36px;
  background: var(--white);
  border-radius: 8px;
  text-align: left;
  box-shadow: var(--shadow-card);
}
.modal-content h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.modal-legal-body {
  font-size: .84rem;
  line-height: 1.9;
  color: var(--ink);
}
.legal-dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px 16px;
  margin-top: 14px;
}
.legal-dl dt { font-weight: 700; }
.legal-dl dd { border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.modal-close-btn {
  margin-top: 24px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   12. Column (Blog) Shared Styles
   ========================================================================== */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-size: .78rem;
  color: var(--border-muted);
}
.breadcrumbs a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumbs a:hover { color: var(--green); }

.column-header-area {
  padding: 50px 0 35px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.column-header-area h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin-top: 12px;
  line-height: 1.4;
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 36px;
}
.filter-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.filter-tab:hover, .filter-tab.is-active {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.column-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px 24px;
  margin-bottom: 60px;
}
.column-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(76, 73, 72, .06);
  transition: transform .25s, box-shadow .25s;
}
.column-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(76, 73, 72, .12);
}
.column-card-body {
  padding: 24px 22px;
}
.column-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: .74rem;
}
.column-card-category {
  padding: 3px 9px;
  background: var(--green-pale);
  color: var(--green-dark);
  font-weight: 700;
  font-size: .68rem;
  border-radius: 3px;
}
.column-card-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 10px;
  color: var(--ink);
}
.column-card-desc {
  font-size: .8rem;
  line-height: 1.8;
  color: var(--ink);
  opacity: .85;
}

/* Column Detail Single Page */
.column-article-single {
  max-width: 820px;
  margin: 0 auto;
}
.column-article {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 56px);
  box-shadow: var(--shadow-card);
}
.article-header {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.article-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.45;
  margin: 16px 0;
}
.article-body h2 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.5;
  margin: 48px 0 20px;
  padding: 12px 18px;
  background: var(--ivory);
  border-left: 4px solid var(--green);
}
.article-body h3 {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  margin: 36px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.article-toc {
  margin: 32px 0 44px;
  padding: 24px 28px;
  background: var(--gray-light);
  border-radius: 6px;
  border: 1px solid var(--line);
}
.article-toc-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 16px;
}
.article-toc-list {
  padding-left: 20px;
  list-style: decimal;
}
.article-toc-list li {
  margin-bottom: 8px;
  font-size: .92rem;
}
.article-cta {
  margin-top: 48px;
  padding: 36px 28px;
  background: var(--ink);
  color: var(--white);
  border-radius: 6px;
  text-align: center;
}
.article-cta h3 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  color: var(--white);
  margin-bottom: 12px;
}
.article-cta-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--green);
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
  border-radius: 3px;
  margin-bottom: 12px;
}
.article-cta .c-button {
  margin-top: 18px;
}

/* ==========================================================================
   13. Top Page CVR & SEO Enhancements
   ========================================================================== */

/* Specialty Card Column Links */
.card__article-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green-dark);
  margin-top: 0.6rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.card__article-link:hover {
  color: var(--green);
}

/* FAQ Answer Links */
.faq-answer a {
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color 0.2s;
}
.faq-answer a:hover {
  color: var(--green);
}

/* 1-Page Anatomy Section (7 Essential Elements) */
.anatomy-section {
  padding: 5.5rem 0;
  background-color: var(--white);
  border-top: 1px solid var(--line);
}
.anatomy-lead {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 3rem;
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 2.1;
  color: var(--ink);
  opacity: 0.92;
}
.anatomy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1160px;
  margin: 0 auto;
}
.anatomy-card {
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.8rem 1.6rem;
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.anatomy-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.anatomy-card__num {
  font-family: var(--eng);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--green);
  line-height: 1;
  margin-bottom: 0.5rem;
  display: block;
}
.anatomy-card__title {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
  line-height: 1.45;
}
.anatomy-card__desc {
  font-size: 0.84rem;
  line-height: 1.85;
  color: var(--ink);
  opacity: 0.88;
}

/* Pricing Dual Cards */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 960px;
  margin: 2.5rem auto 0;
  text-align: left;
}
@media (max-width: 767.99px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.pricing-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2.4rem 2rem;
  box-shadow: var(--shadow-soft);
  position: relative;
  display: flex;
  flex-direction: column;
}
.pricing-card.-primary {
  border: 2px solid var(--green);
}
.pricing-card__badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 12px;
  border-radius: 100px;
  background: var(--green-pale);
  color: var(--green-dark);
  margin-bottom: 1rem;
}
.pricing-card__title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.2rem;
}
.pricing-card__amount {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}
.pricing-card__tax {
  font-size: 0.82rem;
  color: var(--border-muted);
}
.pricing-card__list {
  display: grid;
  gap: 0.7rem;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--ink);
}
.pricing-card__list li {
  position: relative;
  padding-left: 1.4rem;
}
.pricing-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* Plan Specs Table for AIO & Fact Checking */
.plan-specs-wrap {
  max-width: 960px;
  margin: 3.5rem auto 0;
  text-align: left;
}
.plan-specs-wrap h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.2rem;
  color: var(--ink);
}
.plan-specs-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
}
.plan-specs-table th, .plan-specs-table td {
  padding: 13px 18px;
  font-size: 0.86rem;
  line-height: 1.8;
  border-bottom: 1px solid var(--line);
}
.plan-specs-table th {
  background: var(--paper-deep);
  color: var(--ink);
  font-weight: 600;
  width: 28%;
  white-space: nowrap;
}
.plan-specs-table td {
  color: var(--ink);
}
@media (max-width: 767.99px) {
  .plan-specs-table th,
  .plan-specs-table td {
    padding: 11px 13px;
    font-size: 0.8rem;
  }
  .plan-specs-table th {
    width: 32%;
    white-space: normal;
  }
}

/* Repositioned Columns Section */
.page-home .c-news-bottom {
  background-color: var(--ivory);
  padding: 5.5rem 0 5rem;
  border-top: 1px solid var(--line);
}
.c-news-bottom .c-section__inner {
  max-width: 1160px;
  margin: 0 auto;
}
.c-news-bottom .c-heading__h2 {
  text-align: center;
}
.c-news-bottom .c-news__lead {
  text-align: center;
  max-width: 720px;
  margin: -1rem auto 2.5rem;
  font-size: 0.92rem;
  color: var(--border-muted);
}
.c-news-bottom .column-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.c-news-bottom .column-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.c-news-bottom .column-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(76, 73, 72, .12);
}
.c-news-bottom .column-card-body {
  padding: 22px 20px;
  display: block;
}
.c-news-bottom .column-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.c-news-bottom .column-card-category {
  display: inline-block;
  padding: 3px 8px;
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 3px;
}
.c-news-bottom .column-card-meta time {
  font-family: var(--eng);
  font-size: 0.9rem;
  color: var(--border-muted);
}
.c-news-bottom .column-card-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 8px;
}
.c-news-bottom .column-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--ink);
  opacity: 0.85;
}
.c-news-bottom .column-card-body::after {
  display: none;
}