/* White-led surfaces, contextual pastel accents and consistent Japanese sans typography. */
:root{--font-ui:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;--ink:#30363b;--paper:#fff;--line:#e5e7e8;--pink:#f26a60;--muted:#62696d;--heading-size:28px;--heading-leading:1.55;--heading-tracking:.025em;font-family:var(--font-ui)}
body,button,input,select,textarea{font-family:var(--font-ui)}
body{background:#fff;color:var(--ink)}
h1,h2,h3{font-family:var(--font-ui);font-weight:700}
.topics-intro h2,.article-title-line h2,.lower-policy h2,.p-achievements h3,.social-connect h2,.salon-contact h2{font-size:var(--heading-size);line-height:var(--heading-leading);letter-spacing:var(--heading-tracking);font-weight:700;color:var(--ink);margin:0}
.topics-intro h2::after,.article-title-line h2::after,.lower-policy h2::after,.p-achievements h3::after,.social-connect h2::after,.salon-contact h2::after{content:"";display:block;width:32px;height:3px;margin-top:10px;border-radius:3px;background:var(--section-accent,#9db9c9)}
/* Consistent heading shapes; color follows the content instead of every heading being pink. */
.topics-section{--section-accent:#9db9c9}
.article-section{--section-accent:#9db9c9}
.p-introduction{--section-accent:#b1d39c}
.p-achievements{--section-accent:#edcf86}
.social-connect{--section-accent:#b2bec8}
.salon-contact{--section-accent:var(--pink)}
.p-title-mark::after,.p-achievement-mark::after{display:none}
.eyebrow,.lower-eyebrow{font-size:13px;line-height:1.6;letter-spacing:.025em;font-weight:700;color:#68745d}
.site-header{background:#fff}
.header-inner{gap:28px}
.main-nav{margin-left:auto}
.brand-name,.f-brand-name{color:var(--ink);font-weight:700;letter-spacing:.035em}
.brand-name>span,.f-brand-name>span{letter-spacing:.025em}
.brand-role,.f-brand-role{letter-spacing:.12em}
.hero h1{font-weight:700;letter-spacing:.01em;transform:none;color:#30363b}
.identity-note strong{font-weight:700;letter-spacing:.025em}
.identity-note{transform:rotate(-2deg)}
.community-seal>p,.hero-bottom-caption p{font-weight:600;letter-spacing:0}
.hero-description{color:var(--ink)}
.hero-bottom-caption p{color:#40594e}
.topics-section{display:block;padding-block:32px 20px}
.topics-intro{display:flex;align-items:center;gap:28px;margin:0 0 12px}
.topics-intro h2{flex-shrink:0}
.topics-intro>p:last-child{font-size:15px;line-height:1.8;color:var(--muted);margin:0}
.topic-links{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;padding:10px 18px;background:#fff;border:0;border-radius:14px}
.topic-link{min-height:120px;padding:3px 0;gap:10px}
.topic-name{font-size:14px;line-height:1.6;color:var(--ink);letter-spacing:0}
.topic-shape{width:91px;height:80px}
.topic-shape img{width:70px;height:70px}
.article-title-line p,.social-connect-lead,.article-status,.article-card-meta time{color:var(--muted)}
.article-section-more{color:#32657e}
.article-filter-toggle,.article-reset{color:#57656e}
.article-topic-tag{color:#587653}
.article-filters,.article-empty{background:#f6f8f9;border-color:#e0e6e9}
.article-filter-form label,.article-tabs [role=tab]{color:var(--ink)}
.article-filter-form select,.article-filter-form input{background:#fff;border-color:#c9d2d8}
.article-filter-form select:focus-visible{outline:3px solid #326f8b;outline-offset:3px}
.article-photo{background:#f1f3f1}
.lower-policy{background:#f4f8ed}
.p-wash{background:linear-gradient(90deg,#ffffff80 0%,#ffffffad 27%,#ffffff40 43%,#ffffff40 57%,#ffffffad 73%,#ffffff80 100%)}
.p-flower-center{font-weight:700;transform:translate(-50%,-46%)}
.p-flower-center strong{font-weight:700;letter-spacing:0;font-size:36px}
.p-flower-center>span,.p-petals .policy-petal-more{font-weight:600}
.p-orbit-line{border-color:#b0c0a766}
.p-lead{font-size:18px;line-height:1.8;font-weight:700}
.p-description{font-size:16px;line-height:1.85}
.lower-outline-link{background:#fff;color:var(--ink)}
.social-connect{background:#faf9f8;border:1px solid #e8e7e4}
.network-link{background:#fff;border-color:#e3e7ea}
/* A two-pixel visual hover frame without changing the button size. */
.network-link[data-network="LINE"]{--network-color:#06c755}
.network-link[data-network="Facebook"]{--network-color:#1877f2}
.network-link[data-network="YouTube"]{--network-color:#ed1527}
.network-link[data-network="X"]{--network-color:#101010}
.network-link:is(:hover,:focus-visible){background:#fff;border-color:var(--network-color);box-shadow:inset 0 0 0 1px var(--network-color)}
.social-connect-lead{font-size:14px}
.salon-contact{background:linear-gradient(105deg,#fbe7ed,#fff3f4);border-color:#efd6e0}
.salon-contact::after{background:#fff7e4}
.salon-contact h2::after{margin-inline:auto}
.salon-lead{color:var(--muted)}
.lower-footer{background:#fff;border-color:#e9e9e5}
.f-main{padding-block:32px}
.f-navigation nav{gap:5px 24px}
.f-navigation nav>a,.f-policy-nav summary{font-size:14px;font-weight:700;min-height:44px;line-height:1.6;color:var(--ink)}
.f-policy-nav{position:relative}
.f-policy-nav summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none}
.f-policy-nav summary::-webkit-details-marker{display:none}
.f-policy-nav summary svg{width:11px;height:11px;stroke-width:1.5}
.f-policy-nav[open] summary svg{transform:rotate(180deg)}
.f-policy-nav summary:hover,.f-navigation nav>a:hover{color:var(--pink)}
.f-policy-nav summary:focus-visible{outline:3px solid #326f8b;outline-offset:4px}
.f-policy-submenu{position:absolute;left:-16px;bottom:calc(100% + 5px);z-index:5;width:235px;padding:9px 16px;border:1px solid #ead5df;border-radius:8px;background:#fff;box-shadow:0 5px 18px #7a3b5212}
.f-policy-submenu a{display:flex;align-items:center;justify-content:space-between;font-size:14px;line-height:1.6;min-height:44px}
.f-policy-submenu a+a{border-top:1px solid #f0e2e8}
.f-policy-submenu a:hover{color:var(--pink)}
.f-bottom{background:#faf9f8;color:#60676b;border-top:1px solid #e8e7e4}
.f-bottom .f-required-links a{color:#60676b}
.f-required-links li:not(:last-child)::after{background:#ced2d2}
.f-copyright{border-color:#e1e3e2}
@media(max-width:1200px){
 .header-inner{gap:22px}
 .f-main{grid-template-columns:205px minmax(0,1fr) 58px}
 .f-navigation nav{gap:3px 18px}
 .f-navigation nav>a,.f-policy-nav summary{font-size:13px}
 .topic-links{padding-inline:13px;gap:8px}
 .topic-name{font-size:13px;letter-spacing:-.025em}
}
@media(max-width:900px){
 .topics-intro{display:block}
 .topics-intro>p:last-child{margin-top:12px}
 .social-connect h2::after{margin-inline:auto}
 .topic-links{padding-inline:12px}
 .topic-shape{width:76px;height:72px}
 .topic-shape img{width:61px;height:61px}
 .topic-name{font-size:12px}
 .f-main{grid-template-columns:190px minmax(0,1fr) 52px}
}
@media(max-width:640px){
 :root{--heading-size:24px;--heading-leading:1.55;--heading-tracking:.015em}
 .header-inner{gap:12px}
 .hero h1{letter-spacing:0;line-height:1.65}
 
 
 .identity-note strong{font-size:25px}
 .topics-section{padding-block:25px 18px}
 .topics-intro{margin-bottom:10px}
 .topics-intro>p:last-child{font-size:14px;line-height:1.8}
 .topic-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 5px;padding:8px 8px;border-radius:12px}
 .topic-link{min-height:104px;gap:7px}
 .topic-shape{width:77px;height:69px}
 .topic-shape img{width:60px;height:60px}
 .topic-name{font-size:12px;line-height:1.6;letter-spacing:-.035em}
 .topic-links .topic-link:nth-child(5) .topic-name{font-size:11px}
 .topic-link:last-child{grid-column:2}
 .p-achievements{border-color:#d6dfd0}
 .p-achievements .p-lead{font-size:18px}
 .p-flower-center strong{font-size:32px}
 .salon-contact h2{font-size:var(--heading-size)}
 .f-main{grid-template-columns:minmax(0,1fr) 52px;gap:18px 12px;padding-block:27px}
 .f-navigation nav{grid-template-columns:1fr 1fr;gap:0 12px}
 .f-navigation nav>a,.f-policy-nav summary{font-size:13px;white-space:normal}
 .f-policy-submenu{left:0;width:220px}
 .f-required-links li{border-color:#e1e3e2}
}
/* Keep pictograms upright while retaining the soft pastel silhouettes. */
.topic-shape,.topic-link:nth-child(even) .topic-shape{transform:none}
.topic-link:hover .topic-shape{transform:translateY(-3px)}
.topic-shape img,.topic-link:nth-child(even) .topic-shape img{transform:none}

/* Landscape artwork; intermediate tablet widths retain a fading top band. */
.p-landscape{opacity:1;object-position:center 50%}
@media(max-width:900px){
 .p-landscape{height:360px;object-position:20% center;mask-image:linear-gradient(#000 65%,transparent 100%);-webkit-mask-image:linear-gradient(#000 65%,transparent 100%)}
 .p-wash{background:linear-gradient(180deg,#ffffff99 0%,#ffffff66 260px,transparent 360px)}
}

/* Dedicated portrait artwork covers the complete mobile policy section. */
.p-landscape-picture{position:absolute;inset:0;z-index:-3;display:block;pointer-events:none}
.p-landscape-picture .p-landscape{z-index:auto}
@media(max-width:640px){
 .p-landscape{height:100%;object-position:center center;mask-image:none;-webkit-mask-image:none}
 .p-wash{background:linear-gradient(180deg,#ffffff1a 0%,#ffffff26 35%,#ffffff66 68%,#ffffff80 100%)}
}

/* Supplied headline artwork; image alt supplies the accessible H1 text. */
.hero #hero-heading{width:min(100%,650px);max-width:100%;line-height:0;margin:0;font-size:0}
.hero-title-image{display:block;width:100%;height:auto;max-width:100%}
@media(min-width:641px){
 .hero-description{margin-top:22px}
 .hero-actions{margin-top:22px}
 .leaf-sketch{width:46px;height:58px;bottom:2px}
}

/* Supplied badge artwork includes its own lettering, circle and streetscape. */
.community-seal{display:block;object-fit:contain;background:none;border-radius:0;padding:0;transform:none;opacity:1}

/* Three-line introduction; natural wrapping keeps the mobile copy readable. */
.hero-copy-line{display:block}
@media(max-width:640px){
 .hero-description{left:57%;width:43%;top:180px;line-height:1.85;letter-spacing:0}
 .hero-copy-line{white-space:normal;line-break:strict}
}

@media(max-width:640px){.hero-copy-phrase{display:inline-block;white-space:nowrap}}

/* Flamingo pink: saturated actions, softer accents, white-led surfaces. */
:root{--flamingo:#f26a60;--flamingo-soft:#fd9d96;--flamingo-ink:#f26a60;--pink:var(--flamingo-ink);--pink-bright:var(--flamingo);--rose:#fff0ee}
.header-consult,.consult-button,.salon-link,.main-nav .nav-mobile-consult,.search-form>button,.article-filter-keyword button{background:var(--flamingo);color:#302626;border-color:var(--flamingo)}
.header-consult:hover,.consult-button:hover,.salon-link:hover,.main-nav .nav-mobile-consult:hover,.search-form>button:hover,.article-filter-keyword button:hover{background:var(--flamingo-soft);color:#302626;border-color:var(--flamingo-soft)}
.main-nav>a::after,.nav-dropdown::after,.article-tabs [role=tab]::after{background:var(--flamingo)}
.topics-section,.article-section,.salon-contact{--section-accent:var(--flamingo-soft)}
.pickup-strip,.salon-contact{background:linear-gradient(105deg,#ffe3df,#fff4f2)}
.salon-contact{border-color:#f8cec8}
.lower-outline-link{border-color:var(--flamingo)}
.lower-outline-link:hover,.profile-button:hover{background:#fff0ee}
.f-back-top{color:var(--flamingo-ink);background:#ffe6e2}
.f-back-top:hover{background:#fdc5be}
.p-petals .policy-petal:nth-child(8){background:#fdc5be}

/* Flamingo actions with white lettering and icons. */
.header-consult,.consult-button,.salon-link,.main-nav .nav-mobile-consult,.search-form>button,.article-filter-keyword button{background:var(--flamingo);color:#fff;border-color:var(--flamingo)}
.header-consult:hover,.consult-button:hover,.salon-link:hover,.main-nav .nav-mobile-consult:hover,.search-form>button:hover,.article-filter-keyword button:hover{background:#e65b52;color:#fff;border-color:#e65b52}

/* Flamingo brand header, retaining dark navigation text. */
.site-header{background:#fd9d96}

/* Compact header: trim vertical space without shrinking tap targets. */
.header-inner{height:80px}
@media(max-width:1150px){.header-inner{height:76px}}
@media(max-width:1000px){.header-inner{height:72px}.main-nav{max-height:calc(100dvh - 72px)}}
@media(max-width:640px){.header-inner{height:68px}.main-nav{max-height:calc(100dvh - 68px)}}

/* Clear black header labels and a solid white search control. */
.site-header .brand-name,.site-header .brand-role,.site-header .main-nav>a,.site-header .nav-dropdown,.site-header .nav-submenu a,.site-header .mobile-toggle{color:#000}
.site-header .search-toggle{background:#fff;color:#000;border-color:#fff}
.site-header .mobile-toggle>span:not(.menu-word){background:#000}

/* Important notice: pale background with flamingo lettering and icon. */
.pickup-strip{background:linear-gradient(105deg,#ffe3df,#fff4f2);color:var(--ink)}
.pickup-label{color:#f26a60}
.pickup-link,.pickup-link:hover{color:var(--ink)}
.pickup-link time{color:#555e54}
.pickup-label{border-right-color:#fd9d96}
.pickup-link:hover strong{text-decoration:underline;text-underline-offset:4px}

/* The SVG cross stays geometrically centered, independent of font metrics. */
.close-search{display:grid;place-items:center;padding:0;line-height:0}
.close-search svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}

/* Three equal 1px hamburger strokes; the outer two meet at the same X center. */
@media(max-width:1000px){
 .site-header .mobile-toggle{height:48px;min-height:48px;padding:0}
 .site-header .mobile-toggle>.menu-line{position:absolute;left:calc(50% - 12px);width:24px;height:1px;background:#000;opacity:1;transform:none;transform-origin:center;transition:transform .18s,top .18s,opacity .18s}
 .site-header .mobile-toggle>.menu-line:nth-child(1){top:10px}
 .site-header .mobile-toggle>.menu-line:nth-child(2){top:17px}
 .site-header .mobile-toggle>.menu-line:nth-child(3){top:24px}
 .site-header .mobile-toggle>.menu-word{position:absolute;top:33px;left:0;width:100%;margin:0;line-height:10px;text-align:center}
 .site-header .mobile-toggle[aria-expanded=true]>.menu-line:nth-child(1){top:17px;transform:rotate(45deg)}
 .site-header .mobile-toggle[aria-expanded=true]>.menu-line:nth-child(2){opacity:0;transform:scaleX(0)}
 .site-header .mobile-toggle[aria-expanded=true]>.menu-line:nth-child(3){top:17px;transform:rotate(-45deg)}
}

