:root {
  --ysl-ivory: #fbf9f4;
  --ysl-warm: #eee8dc;
  --ysl-warm-deep: #ddd2bf;
  --ysl-ink: #332d27;
  --ysl-muted: #766d61;
  --ysl-gold: #b99a4a;
  --ysl-line: rgba(77, 67, 54, .16);
}

html { scroll-behavior: smooth; }
body {
  color: var(--ysl-ink);
  background: var(--ysl-ivory);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

/* Existing header is replaced only visually; original functions remain in the file. */
#hdr { display: none !important; }
body { padding-top: 88px; }
.ysl-lux-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1100;
  height: 88px;
  padding: 0 clamp(24px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(251, 249, 244, .9);
  border-bottom: 1px solid var(--ysl-line);
  backdrop-filter: blur(16px);
}
.ysl-lux-brand {
  color: var(--ysl-ink);
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 14px;
  letter-spacing: .28em;
}
.ysl-menu-toggle {
  width: 58px;
  height: 58px;
  border: 0;
  background: transparent;
  display: grid;
  place-content: center;
  gap: 7px;
  cursor: pointer;
}
.ysl-menu-toggle span {
  width: 32px;
  height: 1px;
  background: #81765e;
  transition: transform .35s ease, opacity .25s ease;
}
.ysl-menu-open .ysl-menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.ysl-menu-open .ysl-menu-toggle span:nth-child(2) { opacity: 0; }
.ysl-menu-open .ysl-menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.ysl-lux-menu {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: grid;
  place-items: center;
  background: rgba(242, 237, 227, .97);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.ysl-menu-open .ysl-lux-menu { opacity: 1; visibility: visible; }
.ysl-lux-menu-inner { width: min(560px, 78vw); text-align: center; }
.ysl-menu-kicker { margin-bottom: 36px; font: 11px/1.4 Arial, sans-serif; letter-spacing: .34em; color: var(--ysl-gold); }
.ysl-lux-menu a {
  display: block;
  padding: 17px;
  border-bottom: 1px solid var(--ysl-line);
  color: var(--ysl-ink);
  text-decoration: none;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: .12em;
}

/* Hero: fewer decorations, more air, stronger hierarchy. */
#hero {
  min-height: calc(100vh - 88px);
  background: #f4efe6 !important;
}
#hero .hero-text { padding: clamp(64px, 9vw, 132px) clamp(28px, 7vw, 112px) !important; }
#hero .hero-badge { color: var(--ysl-gold) !important; letter-spacing: .32em !important; }
#hero .hero-h1 { font-weight: 400 !important; line-height: 1.65 !important; letter-spacing: .09em !important; }
#hero .hero-sub { color: var(--ysl-muted) !important; line-height: 2.15 !important; }
#hero .hero-price-badge, #hero .hero-tags, #hero .hero-scroll { display: none !important; }
#hero .hero-image img { filter: saturate(.72) contrast(.94) brightness(1.06); }
#hero .hero-image-overlay { background: linear-gradient(90deg, rgba(244,239,230,.16), rgba(244,239,230,0)) !important; }

/* Alternating quiet surfaces. */
#voice, #start, #story, #plans, #blog-teaser, #contact-form-section { background: var(--ysl-ivory) !important; }
#why-ysl, #about, #merit, #flow, #faq, #cta-final { background: var(--ysl-warm) !important; }
section:not(#hero) { padding-top: clamp(84px, 10vw, 150px) !important; padding-bottom: clamp(84px, 10vw, 150px) !important; }
.wrap, .cta-in, .contact-form-in { max-width: 1080px !important; }
.sec-eyebrow, .contact-form-label, .cta-eye { letter-spacing: .3em !important; color: #9b8656 !important; }
.sec-title, .contact-form-title, .cta-h { font-weight: 400 !important; letter-spacing: .1em !important; line-height: 1.75 !important; }
.voice-card, .about-box, .plan-card, .flow-card, .faq-item, .contact-form-in {
  border-color: var(--ysl-line) !important;
  box-shadow: none !important;
  border-radius: 2px !important;
}
.btn { border-radius: 999px !important; letter-spacing: .09em !important; box-shadow: none !important; }
.pain-strip { background: #ded4c3 !important; }
.pain-item { border-color: rgba(70,60,45,.17) !important; }
footer .sns-follow, footer .foot-links { display: none !important; }

/* Home is a quiet entrance; detailed prices stay on dedicated pages. */
#plans .plan-cards,
#plans .plan-note,
#plans .plan-note + div { display: none !important; }

/* レンタル固有の手順はレンタルページへ集約。復元しやすいようHTMLは保持する。 */
#flow { display: none !important; }

/* 旧「3つの始め方」と長い記録は、新しい入口と短いストーリーへ統合。 */
#start,
#voice { display: none !important; }

.ysl-asucayu-entry {
  width: min(560px, 92%);
  margin: 44px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(126, 111, 75, .26);
  text-align: center;
}
.ysl-asucayu-entry span {
  display: block;
  margin-bottom: 10px;
  color: #8c806e;
  font-size: .72rem;
  letter-spacing: .18em;
}
.ysl-asucayu-entry a {
  color: #574b3d;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: .94rem;
  letter-spacing: .08em;
  text-decoration: none;
  border-bottom: 1px solid rgba(170, 146, 87, .62);
  padding-bottom: 5px;
}
.ysl-asucayu-entry a:hover { color: #9b7c35; }
.ysl-home-paths {
  margin-top: clamp(54px, 7vw, 92px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ysl-line);
  border-bottom: 1px solid var(--ysl-line);
}
.ysl-home-path {
  position: relative;
  min-height: 390px;
  padding: 48px 38px 42px;
  display: flex;
  flex-direction: column;
  color: var(--ysl-ink);
  text-decoration: none;
  border-right: 1px solid var(--ysl-line);
  transition: background .35s ease;
}
.ysl-home-path:last-child { border-right: 0; }
.ysl-home-path:hover { background: #e4dccd; }
.ysl-home-path-no {
  margin-bottom: 62px;
  font: 11px/1 Arial, sans-serif;
  letter-spacing: .2em;
  color: #a48d55;
}
.ysl-home-path-en {
  margin-bottom: 16px;
  font: 10px/1.4 Arial, sans-serif;
  letter-spacing: .26em;
  color: #9d8650;
}
.ysl-home-path strong {
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .09em;
}
.ysl-home-path-copy {
  margin-top: 20px;
  color: var(--ysl-muted);
  font-size: 13px;
  line-height: 2;
}
.ysl-home-path-arrow {
  margin-top: auto;
  padding-top: 42px;
  font-size: 11px;
  letter-spacing: .14em;
}
.ysl-home-path-arrow::after { content: "  ──  →"; color: #aa9257; }

#cta-final .cta-btns,
#cta-final .cta-small-note { display: none !important; }
.ysl-final-single { margin-top: 48px; text-align: center; }
.ysl-final-single a {
  display: inline-flex;
  min-width: 260px;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  padding: 16px 38px;
  color: #fff;
  background: #7f795c;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .14em;
}
.ysl-final-single p {
  margin-top: 22px;
  color: var(--ysl-muted);
  font-size: 12px;
  line-height: 2;
  letter-spacing: .05em;
}

/* Quiet, two-stage disclosure for secondary information. */
.ysl-disclosure {
  margin: 0;
  background: var(--ysl-ivory);
  border-top: 1px solid var(--ysl-line);
}
.ysl-disclosure + .ysl-disclosure { border-top: 0; }
.ysl-disclosure > summary {
  position: relative;
  min-height: 150px;
  padding: 42px max(26px, calc((100vw - 1080px) / 2));
  display: grid;
  align-content: center;
  gap: 11px;
  list-style: none;
  cursor: pointer;
  border-bottom: 1px solid var(--ysl-line);
}
.ysl-disclosure > summary::-webkit-details-marker { display: none; }
.ysl-disclosure-en {
  font: 10px/1.4 Arial, sans-serif;
  letter-spacing: .32em;
  color: #a38b50;
}
.ysl-disclosure-title {
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 400;
  letter-spacing: .13em;
}
.ysl-disclosure-plus {
  position: absolute;
  top: 50%;
  right: max(26px, calc((100vw - 1080px) / 2));
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
}
.ysl-disclosure-plus::before,
.ysl-disclosure-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #9a8450;
  transform: translate(-50%, -50%);
  transition: transform .3s ease;
}
.ysl-disclosure-plus::before { width: 22px; height: 1px; }
.ysl-disclosure-plus::after { width: 1px; height: 22px; }
.ysl-disclosure[open] .ysl-disclosure-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.ysl-disclosure #faq,
.ysl-disclosure #contact-form-section { padding-top: 78px !important; padding-bottom: 92px !important; }
.ysl-disclosure #faq > .wrap > .sec-eyebrow,
.ysl-disclosure #faq > .wrap > .sec-title,
.ysl-disclosure #faq > .wrap > .bar,
.ysl-disclosure #contact-form-section .contact-form-label,
.ysl-disclosure #contact-form-section .contact-form-title { display: none !important; }
.ysl-disclosure #contact-form-section .contact-form-in { padding-top: 0 !important; }

.ysl-social-rail {
  position: fixed;
  z-index: 900;
  right: 24px;
  top: 132px;
  display: grid;
  gap: 10px;
}
.ysl-social-rail a {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #786f60;
  background: rgba(251,249,244,.94);
  border: 1px solid var(--ysl-line);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(70,60,45,.08);
}
.ysl-social-rail svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ysl-social-rail svg path, .ysl-social-rail svg .fill { fill: currentColor; stroke: none; }

.ysl-action-rail {
  position: fixed;
  z-index: 900;
  right: 22px;
  bottom: 24px;
  display: grid;
  gap: 12px;
}
.ysl-orbit {
  position: relative;
  width: 100px;
  height: 100px;
  display: grid;
  place-content: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, #cbb46d, #a98b39);
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(91,72,27,.17);
}
.ysl-orbit-text { position: absolute; inset: 2px; width: 96px; height: 96px; fill: #fff; overflow: visible; }
.ysl-orbit-text text { font: 6.4px Arial, sans-serif; letter-spacing: .05em; }
.ysl-orbit:hover .ysl-orbit-text { animation: ysl-spin 9s linear infinite; }
.ysl-action-center {
  display: grid;
  place-items: center;
  gap: 4px;
  font-size: 11px;
  letter-spacing: .08em;
}
.ysl-action-center svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes ysl-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  body { padding-top: 68px; }
  .ysl-lux-header { height: 68px; padding: 0 18px; }
  .ysl-lux-brand { font-size: 11px; letter-spacing: .22em; }
  .ysl-menu-toggle { width: 46px; height: 46px; }
  #hero { min-height: auto; }
  #hero .hero-text { padding: 56px 24px 64px !important; }
  #hero .hero-image { min-height: 54vh; }
  section:not(#hero) { padding-top: 76px !important; padding-bottom: 76px !important; }
  .ysl-social-rail { right: 10px; top: 82px; gap: 8px; }
  .ysl-social-rail a { width: 42px; height: 42px; }
  .ysl-action-rail { right: 12px; bottom: 14px; gap: 8px; }
  .ysl-orbit { width: 82px; height: 82px; }
  .ysl-orbit-text { width: 78px; height: 78px; }
  .ysl-orbit-text text { font-size: 6.1px; }
  .ysl-action-center { gap: 2px; font-size: 10px; }
  .ysl-action-center svg { width: 23px; height: 23px; }
  .ysl-disclosure > summary { min-height: 116px; padding: 30px 24px; }
  .ysl-disclosure-plus { right: 24px; }
  .ysl-disclosure-title { font-size: 21px; }
  .ysl-disclosure #faq,
  .ysl-disclosure #contact-form-section { padding-top: 52px !important; padding-bottom: 64px !important; }
  .ysl-home-paths { grid-template-columns: 1fr; margin-top: 44px; }
  .ysl-home-path {
    min-height: 250px;
    padding: 32px 26px 28px;
    border-right: 0;
    border-bottom: 1px solid var(--ysl-line);
  }
  .ysl-home-path:last-child { border-bottom: 0; }
  .ysl-home-path-no { margin-bottom: 32px; }
  .ysl-home-path-arrow { padding-top: 26px; }
  .ysl-final-single a { min-width: min(260px, 86vw); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 2026-08-12: 情報量とカード表現を再整理。ホームはブランドの入口に限定する。 */
#about,
#merit { display: none !important; }

.pain-strip {
  padding: clamp(72px, 8vw, 112px) 28px !important;
  background: var(--ysl-ivory) !important;
  border: 0 !important;
}
.pain-head {
  margin-bottom: 38px !important;
  color: #8c7b5a !important;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: .18em !important;
}
.pain-list {
  max-width: 820px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--ysl-line);
}
.pain-item {
  min-height: 112px;
  padding: 30px 34px !important;
  align-items: center !important;
  color: var(--ysl-muted) !important;
  border-bottom: 1px solid var(--ysl-line) !important;
  font-size: .84rem !important;
  line-height: 2 !important;
}
.pain-item:nth-child(odd) { border-right: 1px solid var(--ysl-line) !important; }
.pain-item::before { content: "—" !important; color: var(--ysl-gold) !important; }

#why-ysl { background: var(--ysl-warm) !important; }
#story { background: var(--ysl-ivory) !important; }
#plans { background: var(--ysl-warm) !important; }
#blog-teaser { background: var(--ysl-ivory) !important; }

#why-ysl .merit-list,
.ysl-home-paths,
.blog-cards {
  gap: 0 !important;
  border-top: 1px solid var(--ysl-line) !important;
  border-bottom: 1px solid var(--ysl-line) !important;
}
#why-ysl .merit-list {
  margin-top: clamp(54px, 7vw, 88px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#why-ysl .merit-card,
.ysl-home-path,
.blog-card-item {
  margin: 0 !important;
  padding: clamp(34px, 4vw, 52px) !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--ysl-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
#why-ysl .merit-card:last-child,
.ysl-home-path:last-child,
.blog-card-item:last-child { border-right: 0 !important; }
#why-ysl .merit-card::before { display: none !important; }
#why-ysl .merit-num {
  width: auto !important;
  margin-right: 8px;
  color: #b39a5e !important;
  font-size: .72rem !important;
  font-weight: 400 !important;
  letter-spacing: .2em;
}
#why-ysl .merit-h,
.blog-card-item h3 {
  color: var(--ysl-ink) !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
  line-height: 1.8 !important;
}
#why-ysl .merit-p,
.blog-card-excerpt { color: var(--ysl-muted) !important; line-height: 2 !important; }

.story-card {
  width: min(720px, 100%);
  margin: clamp(54px, 7vw, 88px) auto 0 !important;
  padding: 0 0 32px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ysl-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.story-label {
  position: static !important;
  display: block;
  margin-bottom: 28px;
  padding: 0 !important;
  color: #9b8656 !important;
  background: transparent !important;
  font-family: Arial, sans-serif;
  font-size: .64rem !important;
  letter-spacing: .3em !important;
}
.story-body { font-size: .88rem !important; line-height: 2.35 !important; }

.blog-cards {
  max-width: 960px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.blog-cta { margin-top: 58px !important; }

@media (max-width: 760px) {
  .pain-list,
  #why-ysl .merit-list,
  .blog-cards { grid-template-columns: 1fr !important; }
  .pain-item { min-height: auto; padding: 24px 10px !important; border-right: 0 !important; }
  #why-ysl .merit-card,
  .ysl-home-path,
  .blog-card-item {
    border-right: 0 !important;
    border-bottom: 1px solid var(--ysl-line) !important;
  }
  #why-ysl .merit-card:last-child,
  .ysl-home-path:last-child,
  .blog-card-item:last-child { border-bottom: 0 !important; }
}

/* Final message: the same quiet palette as the rest of the home page. */
#cta-final {
  background: var(--ysl-warm) !important;
  color: var(--ysl-ink) !important;
}
#cta-final::before,
#cta-final::after { display: none !important; }
#cta-final .cta-eye { color: #9b8656 !important; }
#cta-final .cta-h { color: var(--ysl-ink) !important; }
#cta-final .cta-p {
  margin-bottom: 0 !important;
  color: var(--ysl-muted) !important;
}
#cta-final .ysl-final-single { margin-top: 38px !important; }
#cta-final .ysl-final-single a {
  color: var(--ysl-ink) !important;
  background: transparent !important;
  border-color: rgba(77, 67, 54, .34) !important;
}
#cta-final .ysl-final-single a:hover {
  color: #8e7336 !important;
  border-color: rgba(142, 115, 54, .62) !important;
}

/* Secondary destinations use one quiet text-link style, not extra button shapes. */
.ysl-text-link,
#cta-final .ysl-final-single a.ysl-text-link {
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-block !important;
  padding: 0 0 7px !important;
  color: var(--ysl-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(77, 67, 54, .32) !important;
  border-radius: 0 !important;
  font-size: .8rem !important;
  font-weight: 400 !important;
  letter-spacing: .15em !important;
  line-height: 1.6 !important;
  text-decoration: none !important;
}
.ysl-text-link:hover,
#cta-final .ysl-final-single a.ysl-text-link:hover {
  color: #8e7336 !important;
  border-bottom-color: rgba(142, 115, 54, .7) !important;
}

/* Hero CTA hierarchy: LINE remains visible without competing with the primary action. */
.hero-line-secondary {
  background: transparent !important;
  color: var(--ysl-ink) !important;
  border: 1px solid rgba(142, 115, 54, .56) !important;
  box-shadow: none !important;
}
.hero-line-secondary:hover {
  background: rgba(255, 255, 255, .34) !important;
  border-color: rgba(142, 115, 54, .82) !important;
  opacity: 1 !important;
}

/* Transparency pass: one restrained palette, softer boundaries, wider air. */
body {
  background:
    radial-gradient(circle at 8% 8%, rgba(255,255,255,.76), transparent 30%),
    radial-gradient(circle at 92% 34%, rgba(221,210,191,.24), transparent 34%),
    var(--ysl-ivory) !important;
}
.ysl-lux-header {
  background: rgba(251, 249, 244, .78) !important;
  border-bottom-color: rgba(77, 67, 54, .1) !important;
  backdrop-filter: blur(22px) saturate(.82) !important;
}
#hero {
  background: linear-gradient(120deg, rgba(251,249,244,.96), rgba(238,232,220,.78)) !important;
}
#hero .hero-image img {
  filter: saturate(.62) contrast(.9) brightness(1.1) !important;
}
#hero .hero-image-overlay {
  background: linear-gradient(90deg, rgba(251,249,244,.3), rgba(251,249,244,.03)) !important;
}
.wrap,
.cta-in,
.contact-form-in { max-width: 980px !important; }
section:not(#hero) {
  padding-top: clamp(108px, 12vw, 176px) !important;
  padding-bottom: clamp(108px, 12vw, 176px) !important;
}
.sec-title,
.cta-h {
  color: var(--ysl-ink) !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
}
.sec-lead {
  color: var(--ysl-muted) !important;
  line-height: 2.2 !important;
}
#why-ysl,
#plans,
#cta-final {
  background: rgba(238, 232, 220, .72) !important;
}
#story,
#blog-teaser,
.pain-strip {
  background: rgba(251, 249, 244, .72) !important;
}
#why-ysl .merit-card,
.ysl-home-path,
.blog-card-item {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(77, 67, 54, .11) !important;
  transition: background .45s ease, color .45s ease !important;
}
#why-ysl .merit-card:hover,
.ysl-home-path:hover,
.blog-card-item:hover {
  background: rgba(255, 255, 255, .3) !important;
}
.pain-list,
#why-ysl .merit-list,
.ysl-home-paths,
.blog-cards,
.story-card {
  border-color: rgba(77, 67, 54, .11) !important;
}
.pain-item {
  border-color: rgba(77, 67, 54, .1) !important;
}
.ysl-disclosure {
  background: rgba(251, 249, 244, .76) !important;
}
.ysl-disclosure > summary {
  border-color: rgba(77, 67, 54, .1) !important;
}

@media (max-width: 760px) {
  section:not(#hero) {
    padding-top: 88px !important;
    padding-bottom: 88px !important;
  }
}