/* Mobile responsive overrides for the La Douce Pluie site.
   Loaded after the Homepage-Builder-generated CSS, which uses fixed
   px/cm widths (and per-page inline style overrides), so most rules
   here need !important to win the cascade on small screens. */

* {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------
   Opening splash screen (index.html only): shows the logo full
   screen for a moment on load, then fades out to reveal the page
   underneath. See nav-toggle.js for the timing/fade-out logic.
--------------------------------------------------------------- */
#hpb-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    opacity: 1;
    transition: opacity 0.7s ease;
}

#hpb-splash.hpb-splash-hide {
    opacity: 0;
    pointer-events: none;
}

.hpb-splash-logo {
    width: 55%;
    max-width: 320px;
    height: auto;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.hpb-splash-logo.hpb-splash-logo-in {
    opacity: 1;
    transform: translateY(0);
}

body:has(#hpb-splash:not(.hpb-splash-hide)) {
    overflow: hidden;
}

/* falling raindrops + landing ripples behind the splash logo,
   matching the "gentle rain" (La Douce Pluie) theme */
.hpb-splash-drops {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hpb-splash-drop {
    position: absolute;
    top: -20px;
    width: 5px;
    height: 15px;
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    background: linear-gradient(to bottom, rgba(92, 122, 153, 0.05), rgba(92, 122, 153, 0.5));
    opacity: 0;
    animation: hpb-drop-fall 1.4s ease-in forwards;
}

/* last drop reads as farther back in the scene: scaled down and
   faded slightly, as one unit (drop + its ripples) around its own
   landing point. */
.hpb-splash-drop-far-wrap {
    position: absolute;
    inset: 0;
    transform: scale(0.6);
    transform-origin: 64% 48vh;
    opacity: 0.75;
}

/* elliptical (not circular) so a uniform scale() keeps reading as a
   ring viewed at an angle on a water surface, rather than a flat
   circle — plus an inset highlight/shadow pair for a raised, 3D
   "torus" look instead of a flat outline. */
.hpb-splash-ripple {
    position: absolute;
    width: 22px;
    height: 11px;
    margin: -5.5px 0 0 -11px;
    border-radius: 50%;
    border: 1.5px solid rgba(92, 122, 153, 0.55);
    box-shadow:
        0 2px 4px rgba(61, 90, 115, 0.25),
        inset 0 1.5px 1.5px rgba(255, 255, 255, 0.6),
        inset 0 -1.5px 1.5px rgba(61, 90, 115, 0.25);
    transform: scale(0);
    opacity: 0;
    animation: hpb-ripple-grow 3.4s ease-out forwards;
}

.hpb-splash-ripple-b {
    border-color: rgba(92, 122, 153, 0.36);
    box-shadow:
        0 2px 4px rgba(61, 90, 115, 0.16),
        inset 0 1.5px 1.5px rgba(255, 255, 255, 0.4),
        inset 0 -1.5px 1.5px rgba(61, 90, 115, 0.16);
    animation-name: hpb-ripple-grow-b;
    animation-duration: 3.4s;
}

.hpb-splash-ripple-c {
    border-color: rgba(92, 122, 153, 0.22);
    box-shadow:
        0 2px 4px rgba(61, 90, 115, 0.1),
        inset 0 1.5px 1.5px rgba(255, 255, 255, 0.25),
        inset 0 -1.5px 1.5px rgba(61, 90, 115, 0.1);
    animation-name: hpb-ripple-grow-c;
    animation-duration: 3.4s;
}

@keyframes hpb-drop-fall {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    62% {
        opacity: 1;
    }
    72% {
        transform: translateY(calc(var(--fall-to) + 20px));
        opacity: 0;
    }
    100% {
        transform: translateY(calc(var(--fall-to) + 20px));
        opacity: 0;
    }
}

@keyframes hpb-ripple-grow {
    0%,
    33% {
        transform: scale(0);
        opacity: 0;
    }
    37% {
        transform: scale(0.4);
        opacity: 0.65;
    }
    100% {
        transform: scale(13);
        opacity: 0;
    }
}

@keyframes hpb-ripple-grow-b {
    0%,
    33% {
        transform: scale(0);
        opacity: 0;
    }
    37% {
        transform: scale(0.4);
        opacity: 0.42;
    }
    100% {
        transform: scale(17.5);
        opacity: 0;
    }
}

@keyframes hpb-ripple-grow-c {
    0%,
    33% {
        transform: scale(0);
        opacity: 0;
    }
    37% {
        transform: scale(0.4);
        opacity: 0.26;
    }
    100% {
        transform: scale(22);
        opacity: 0;
    }
}

/* ---------------------------------------------------------------
   Site-wide color re-theme: pink -> gray-blue.
   Overrides the Homepage-Builder-generated CSS's pink accent colors
   (#D1459F, #A67D9A, #FFB0E3, #ff06ff) everywhere, at every width.
--------------------------------------------------------------- */
a:link,
a:visited {
    color: #5C7A99 !important;
}

a:hover,
a:active {
    color: #3D5A73 !important;
}

.hpb-layoutset-02 #hpb-wrapper h3 {
    color: #5C7A99 !important;
    border-bottom-color: #5C7A99 !important;
}

p.large {
    color: #5C7A99 !important;
}

#shopinfo h3 {
    color: #5C7A99 !important;
    border-bottom-color: #5C7A99 !important;
}

#shopinfo h4 {
    color: #5C7A99 !important;
}

/* "▲RETURN TO TOP" was a pink PNG background image (returnTop_5Ac.png);
   swap it for plain text so it follows the gray-blue theme too. */
#pagetop a {
    background-image: none !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
    color: #5C7A99 !important;
    font-size: 0.85em;
}

#pagetop a::before {
    content: "▲ ";
}

h2 span.en {
    color: #C9D6DE !important;
}

.hpb-layoutset-02 h2 {
    background-image: none !important;
    background: linear-gradient(to bottom, transparent 0%, #3D5A73 55%) !important;
}

table th {
    background-color: #EAF0F4 !important;
}

#toppage-news {
    border-left-color: #5C7A99 !important;
}

/* inline color="#ff06ff" accents on treatment headings (menu.html,
   newpage2.html) */
font[color="#ff06ff" i],
font[color="#ff00ff" i] {
    color: #3D5A73 !important;
}

/* Site-wide font: a gentle mincho (serif) typeface to match the
   salon's soft, elegant "優しい雨" branding. Loaded via Google Fonts
   in each page's <head>. Falls back to the original Japanese Gothic
   stack if the web font fails to load. */
body {
    font-family: 'Shippori Mincho', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', 'メイリオ', Meiryo, serif !important;
}

/* Pin the page background to plain white everywhere, so the fixed
   header's white background never shows a seam against the
   scrolling content behind it (some mobile browsers otherwise apply
   their own default/dark background where no color is set). */
html,
body {
    background-color: #ffffff !important;
    color-scheme: light;
}

/* Keep in-page anchor targets (menu.html#aromatherapy etc., linked
   from the hamburger sub-menu) from landing underneath the fixed
   header — nav-toggle.js keeps --hpb-header-height in sync with the
   header's real height. */
#aromatherapy,
#reflexology,
#headtherapy,
#bodycare,
#myofascial {
    /* scroll-margin-top has no effect on inline boxes — these ids sit
       on <font> tags, which are inline by default. */
    display: inline-block;
    scroll-margin-top: 132px;
}

/* Fixed booking bar shown only on mobile (see @media block below). */
.hpb-mobile-cta {
    display: none;
}

/* ご予約ページ(reserve.html)の文字サイズを、よくある質問ページ(faq.html、
   .hpb-faq-block)と揃える。幅・画面サイズを問わず全体に適用。 */
#contact {
    font-size: 1.35em;
}

/* WEB予約(自作予約システム)ボックス on reserve.html (applies on desktop too). */
.hpb-web-reserve {
    background-color: #EEF2F6;
    border: 1px solid #5C7A99;
    border-radius: 8px;
    padding: 20px 16px;
    margin: 16px 0;
    text-align: center;
}

.hpb-web-reserve-btn {
    display: inline-block;
    background-color: #5C7A99;
    font-weight: bold;
    font-size: 1.1em;
    padding: 14px 36px;
    border-radius: 6px;
    text-decoration: none;
    margin-bottom: 10px;
}

/* a:link/a:visited(!important)より詳細度を上げて確実に白文字にする */
a.hpb-web-reserve-btn:link,
a.hpb-web-reserve-btn:visited,
a.hpb-web-reserve-btn:hover,
a.hpb-web-reserve-btn:active {
    color: #ffffff !important;
}

.hpb-web-reserve-btn:hover,
.hpb-web-reserve-btn:active {
    background-color: #3D5A73;
}

.hpb-web-reserve-note {
    font-size: 0.9em;
    color: #555555;
    margin: 8px 0 0 0 !important;
}

/* ============================================================
   ホームページに直接埋め込む「一目で分かる空き状況カレンダー」(reserve.html)
   2026-10-01追加。予約システム側の api/availability_summary.php の結果を
   reserve-calendar.js で描画する。メニューを選ぶ前の段階でも、月単位で
   空いている日・埋まっている日がひと目で分かるようにするためのもの。
   ============================================================ */
.rc-calendar {
    background-color: #ffffff;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0 24px;
    text-align: center;
}

.rc-calendar-title {
    font-weight: bold;
    margin: 0 0 10px;
    color: #5C7A99;
}

.rc-calendar-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 10px;
}

.rc-calendar-head button {
    background-color: #EEF2F6;
    border: 1px solid #5C7A99;
    color: #5C7A99;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
}

.rc-calendar-head button:disabled {
    opacity: 0.35;
    cursor: default;
}

.rc-month-label {
    font-weight: bold;
    min-width: 7em;
}

.rc-weekday-row,
.rc-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.rc-weekday-row {
    margin-bottom: 4px;
    font-size: 0.85em;
    color: #666666;
}

.rc-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    font-size: 0.95em;
    text-decoration: none;
}

.rc-day-num {
    line-height: 1;
}

.rc-day-badge {
    font-size: 0.6em;
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
}

.rc-day-blank {
    visibility: hidden;
}

.rc-day-available {
    background-color: #E3F3E6;
    border: 1px solid #4CAF50;
    font-weight: bold;
}

/* a:link/a:visited(!important)より詳細度を上げて、下線無し・緑文字を確実に適用する
   (reserve.htmlの他のボタン類と同じ理由。hpb-web-reserve-btn等を参照) */
a.rc-day-available:link,
a.rc-day-available:visited,
a.rc-day-available:hover,
a.rc-day-available:active {
    color: #2E7D32 !important;
    text-decoration: none !important;
}

.rc-day-available:hover {
    background-color: #CDEBD2;
}

.rc-day-full {
    background-color: #F5F5F5;
    color: #999999;
}

.rc-day-closed,
.rc-day-out_of_range,
.rc-day-past {
    background-color: #FAFAFA;
    color: #cccccc;
}

.rc-calendar-loading,
.rc-calendar-error {
    grid-column: 1 / -1;
    color: #666666;
    font-size: 0.9em;
    padding: 12px 0;
}

.rc-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    font-size: 0.8em;
    color: #666666;
}

.rc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rc-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.rc-dot-available { background-color: #4CAF50; }
.rc-dot-full { background-color: #bbbbbb; }
.rc-dot-closed { background-color: #e0e0e0; }

.rc-calendar-hint {
    font-size: 0.8em;
    color: #666666;
    margin: 10px 0 0 !important;
}

/* LINE reservation box on reserve.html (applies on desktop too). */
.hpb-line-reserve {
    background-color: #EEF2F6;
    border: 1px solid #06C755;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    text-align: center;
}

.hpb-line-reserve-btn {
    display: inline-block;
    margin-bottom: 12px;
}

.hpb-line-reserve-note {
    font-weight: bold;
    text-align: center;
    margin: 8px 0 4px 0 !important;
}

.hpb-line-reserve-list {
    display: inline-block;
    text-align: left;
    margin: 0 auto 8px auto;
    padding-left: 1.2em;
}

.hpb-line-reserve-list li {
    line-height: 1.6;
}

@media screen and (max-width: 768px) {

    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    body {
        padding-bottom: 56px !important;
    }

    .hpb-mobile-cta {
        display: flex !important;
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        z-index: 1000;
        box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
    }

    .hpb-mobile-cta a {
        flex: 1;
        display: block;
        text-align: center;
        padding: 14px 0;
        font-weight: bold;
        font-size: 15px;
        text-decoration: none !important;
        color: #ffffff !important;
    }

    .hpb-mobile-cta-tel {
        background-color: #7C93A3;
    }

    .hpb-mobile-cta-web {
        background-color: #5C7A99;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ---- container / overall width ---- */
    #hpb-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* ---- header ---- */
    #hpb-header {
        height: auto !important;
        padding: 3px 0 !important;
    }

    #hpb-headerMain,
    #hpb-headerLogo,
    #hpb-headerExtra1,
    #hpb-headerExtra2 {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        text-align: center !important;
    }

    #hpb-headerMain h1 {
        padding: 3px 12px 0 12px !important;
        text-align: center !important;
    }

    #hpb-headerMain h1 img {
        max-width: 52% !important;
        height: auto !important;
        margin-left: 36px !important;
    }

    #hpb-headerExtra1 p.tel,
    #hpb-headerExtra1 p.address {
        text-align: center !important;
        padding-right: 0 !important;
    }

    #hpb-headerExtra1 p.tel span {
        text-align: center !important;
    }

    /* the tel/address block is dropped from the header on mobile; the
       aside's shop-info block already shows the same phone/address
       further down the page. */
    #hpb-headerExtra1 {
        display: none !important;
    }

    /* ---- navigation ---- */
    /* #hpb-nav sits after #hpb-wrapper in the markup (it only looked
       "near the top" on desktop because it was position:absolute).
       Reflow #hpb-inner as a column flex box so the nav can be
       reordered to the top on mobile via `order`. */
    #hpb-inner {
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #hpb-wrapper {
        order: 2 !important;
    }

    #hpb-nav {
        order: 1 !important;
    }

    #hpb-aside {
        order: 3 !important;
    }

    /* stray <br> tags used for manual spacing in the desktop layout;
       in the mobile flex column they just add extra empty gaps */
    #hpb-inner > br,
    #hpb-wrapper > br {
        display: none !important;
    }

    /* some pages set a fixed cm width inline on these elements too */
    #hpb-headerMain h1,
    #contact,
    .hpb-lay-special0 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* top-page slideshow: bleed edge-to-edge, breaking out of
       #hpb-wrapper's left/right padding */
    .hpb-photomotion {
        width: auto !important;
        max-width: none !important;
        margin-left: -14px !important;
        margin-right: -14px !important;
    }

    #hpb-nav {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    #hpb-nav ul {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    #hpb-nav li {
        width: 33.333% !important;
        height: auto !important;
        float: none !important;
        border-bottom: 1px solid #ffffff !important;
    }

    #hpb-nav li a {
        height: auto !important;
        padding: 8px 0 !important;
    }

    /* shop info box: remove outer border on mobile */
    #shopinfo {
        border: none !important;
    }

    /* on inner pages, hide the HotPepper/LINE promo block in
       shop info and keep just the address/phone/hours paragraph;
       index.html and access.html don't have this wrapper, so they
       keep showing the full block */
    .hpb-shopinfo-extra {
        display: none !important;
    }

    /* LINE QR code: only useful when viewing on a desktop screen and
       scanning with a phone, so hide it when already browsing on
       mobile (index.html / access.html keep the full shop info block,
       including this image, otherwise). */
    #shopinfo img[src*="qr-official.line.me"] {
        display: none !important;
    }

    /* ---- main two-column layout -> stacked ---- */
    #hpb-wrapper,
    #hpb-aside {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #hpb-title,
    #hpb-main {
        width: 100% !important;
    }

    /* top page hero image */
    .hpb-layoutset-01 #hpb-title h2 {
        height: 150px !important;
        background-size: contain !important;
    }

    /* ---- menu / price tables: stack image + text ---- */
    table {
        width: 100% !important;
    }

    .hpb-dp-tb1,
    .hpb-dp-tb1 tbody,
    .hpb-dp-tb1 tr {
        display: block !important;
        width: 100% !important;
    }

    .hpb-dp-tb1-cell1,
    .hpb-dp-tb1-cell2 {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        text-align: left !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hpb-dp-tb1-cell2 img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }

    /* menu.html: Aromatherapy / Reflexology photos, a bit smaller and centered */
    .hpb-dp-tb1-cell2 img[src="DSC009273.jpg"],
    .hpb-dp-tb1-cell2 img[src="DSC008894.jpg"] {
        max-width: 60% !important;
        float: none !important;
        display: block !important;
        margin: 0 auto !important;
    }

    #menu .item {
        width: 100% !important;
        float: none !important;
    }

    #coupon-off,
    #coupon-limit {
        float: none !important;
        width: 100% !important;
    }

    /* ---- forms (reserve page) ---- */
    textarea,
    input.l,
    input.m,
    input.s {
        width: 100% !important;
    }

    /* ---- footer ---- */
    #hpb-footerExtra1 {
        position: static !important;
        text-align: center !important;
    }

    #hpb-footerMain {
        padding-top: 20px !important;
    }
}

/* ---------------------------------------------------------------
   Hamburger menu, replacing the always-visible #hpb-nav grid.
   Applies at every screen width (not just mobile).
--------------------------------------------------------------- */
.hpb-hamburger-btn {
    position: fixed;
    top: calc(var(--hpb-header-height, 100px) / 2);
    transform: translateY(-50%);
    left: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    z-index: 2100;
    cursor: pointer;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (min-width: 769px) {
    .hpb-hamburger-btn {
        top: calc(var(--hpb-header-height, 88px) / 2);
        transform: translateY(-50%);
        left: 0;
        width: 32px;
        height: 32px;
    }

    #hpb-header {
        height: auto !important;
        padding: 8px 0 !important;
    }

    #hpb-header > br {
        display: none !important;
    }

    /* top-page hero gallery: same width as the サロン紹介 bar below it */
    .hpb-photomotion {
        width: 100% !important;
    }

    #hpb-headerMain {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    #hpb-headerMain h1 {
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }

    #hpb-headerMain h1 img {
        display: block !important;
        width: 260px !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* pages with no shop-info sidebar (all but access.html): let the
       main column fill the space the 300px aside used to occupy */
    #hpb-inner:not(:has(#hpb-aside)) #hpb-wrapper {
        width: 890px !important;
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #hpb-inner:not(:has(#hpb-aside)) #hpb-title,
    #hpb-inner:not(:has(#hpb-aside)) #hpb-main {
        width: 100% !important;
    }
}

.hpb-hamburger-btn span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    margin-left: -9px;
    background: #7C93A3;
    transition: transform 0.15s ease, opacity 0.15s ease, margin-top 0.15s ease;
}

.hpb-hamburger-btn span:nth-child(1) { margin-top: -7px; }
.hpb-hamburger-btn span:nth-child(2) { margin-top: -1px; }
.hpb-hamburger-btn span:nth-child(3) { margin-top: 5px; }

.hpb-hamburger-btn.is-open span:nth-child(1) {
    margin-top: -1px;
    transform: rotate(45deg);
}

.hpb-hamburger-btn.is-open span:nth-child(2) {
    opacity: 0;
}

.hpb-hamburger-btn.is-open span:nth-child(3) {
    margin-top: -1px;
    transform: rotate(-45deg);
}

body.hpb-nav-open {
    overflow: hidden;
}

#hpb-nav {
    display: none !important;
}

body.hpb-nav-open #hpb-nav {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    background-image: none !important;
    z-index: 2000 !important;
    padding: 90px 20px 40px !important;
    box-sizing: border-box !important;
}

body.hpb-nav-open #hpb-nav::before {
    content: "MENU";
    display: block;
    text-align: center;
    font-size: 13px;
    font-family: century, serif;
    letter-spacing: 0.25em;
    color: #7C93A3;
    margin-bottom: 24px;
}

body.hpb-nav-open #hpb-nav ul {
    display: block !important;
    max-width: 420px;
    margin: 0 auto !important;
}

body.hpb-nav-open #hpb-nav li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    float: none !important;
    border-right: none !important;
    border-bottom: 1px solid #DCE4EA !important;
}

body.hpb-nav-open #hpb-nav li a {
    height: auto !important;
    padding: 18px 24px !important;
    background-image: none !important;
    text-align: center !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.hpb-nav-open #hpb-nav li span.en {
    font-size: 12px !important;
    color: #7C93A3 !important;
}

body.hpb-nav-open #hpb-nav li span.ja {
    font-size: 16px !important;
    color: #333333 !important;
    padding-top: 2px !important;
}

body.hpb-nav-open #hpb-nav a:hover,
body.hpb-nav-open #hpb-nav a:active {
    background-image: none !important;
    background-color: #EAF0F4 !important;
    color: inherit !important;
}

/* ---- grouped sub-menu (menu / headmanu / myofascial release) ----
   "メニュー" itself is now a plain toggle button, not a link — tapping
   it only opens/closes the sub-list below, it never navigates. */
body.hpb-nav-open #hpb-nav .hpb-nav-group-head {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 18px 24px;
    border: none;
    background: transparent;
    background-image: none;
    text-align: center;
    font: inherit;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.hpb-nav-open #hpb-nav .hpb-nav-group-head:hover,
body.hpb-nav-open #hpb-nav .hpb-nav-group-head:active {
    background-color: #EAF0F4;
}

body.hpb-nav-open #hpb-nav .hpb-nav-group-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
    color: #7C93A3;
    pointer-events: none;
}

body.hpb-nav-open #hpb-nav .hpb-nav-sub {
    display: none !important;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #DCE4EA;
}

body.hpb-nav-open #hpb-nav .hpb-nav-group.is-open .hpb-nav-sub {
    display: block !important;
}

body.hpb-nav-open #hpb-nav .hpb-nav-sub li {
    border-bottom: none !important;
}

body.hpb-nav-open #hpb-nav .hpb-nav-sub li + li {
    border-top: 1px solid #DCE4EA !important;
}

body.hpb-nav-open #hpb-nav .hpb-nav-sub li a {
    padding: 12px 24px !important;
    background-color: #FCFAFC !important;
}

body.hpb-nav-open #hpb-nav .hpb-nav-sub li span.en {
    font-size: 10px !important;
}

body.hpb-nav-open #hpb-nav .hpb-nav-sub li span.ja {
    font-size: 14px !important;
    color: #666666 !important;
}

/* ---------------------------------------------------------------
   Sticky header (logo + hamburger) — stays fixed at the top while
   everything below it scrolls. Applies at every screen width.
   #hpb-container gets a matching padding-top set by nav-toggle.js
   (measured from the header's real rendered height, since it
   varies per page/breakpoint).
--------------------------------------------------------------- */
#hpb-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1500 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    border-bottom: 2px solid #5C7A99 !important;
}

/* 旧ホームページ時代のヘッダー右上の店舗情報(電話・住所・メール)は、
   下部の店舗情報カードに集約したため全幅で非表示にする。 */
#hpb-headerExtra1 {
    display: none !important;
}

/* ---------------------------------------------------------------
   menu.html page background — a fixed (non-scrolling) photo behind
   the page content. The opaque light gray-blue menu cards, and the
   opaque title banner below, paint over it in their own area, so
   the photo only shows through the gaps between cards.

   iOS Safari largely ignores background-attachment:fixed (even more
   so on non-body elements), so this uses a plain position:fixed
   element instead — a technique iOS supports reliably. It's a real
   element (not clipped to a section), covering the whole viewport
   behind everything else; #hpb-title is made opaque below so the
   photo only becomes visible from the first card downward.
--------------------------------------------------------------- */
.hpb-menu-fixed-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: url('menu-bg.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* body's own opaque white (set sitewide, near the top of this file)
   paints as a normal in-flow box above negative z-index descendants,
   which would otherwise hide .hpb-menu-fixed-bg entirely. Make body
   transparent on this page only — html's white stays as the true
   canvas behind the fixed photo layer. */
body.hpb-page-menu {
    background-color: transparent !important;
}

.hpb-menu-title-mask {
    background-color: #ffffff;
    border-radius: 12px;
}

body.hpb-page-menu #hpb-title h2 {
    border-radius: 12px;
    border: 1px solid #5C7A99;
    text-align: center;
}

.hpb-menu-bg-area {
    padding-bottom: 48px;
}

/* ---------------------------------------------------------------
   Menu category cards (menu.html) — light gray-blue background
   behind each category's price list + its option/additional menu,
   so the categories read as distinct groups at a glance.
--------------------------------------------------------------- */
.hpb-menu-category {
    background-color: #EDF1F5;
    border-radius: 12px;
    padding: 18px 20px 14px;
    margin: 0 16px 64px;
    font-size: 1.35em;
}

.hpb-menu-category-first {
    margin-top: 24px;
}

/* Category titles (Aromatherapy / Reflexology / Head therapy /
   Body Care / Myofascial Release) — wider letter-spacing and a
   heavier serif weight for a more premium, editorial feel than the
   plain bold used elsewhere. */
#aromatherapy,
#reflexology,
#headtherapy,
#bodycare,
#myofascial {
    font-family: 'Shippori Mincho', 'Yu Mincho', 'YuMincho', serif;
    font-size: 1.4em;
    font-weight: 600;
    letter-spacing: 0.03em;
}

#aromatherapy i,
#reflexology i,
#headtherapy i,
#bodycare i,
#myofascial i {
    font-style: normal;
    letter-spacing: 0.14em;
    font-weight: 500;
}

.hpb-menu-category table {
    border-top: none !important;
}

.hpb-menu-category table td {
    border-bottom: none !important;
}

.hpb-menu-option-block {
    font-size: 0.9em;
}

.hpb-menu-option-heading {
    font-weight: normal !important;
    font-size: 1.3em !important;
}

.hpb-menu-option-note {
    display: inline-block;
    margin-top: 6px;
    margin-left: 4em;
    color: #333333;
    font-size: 0.9em;
}

/* ---------------------------------------------------------------
   Menu price lists (menu.html etc.) — replaces runs of manual
   full-width spaces (used to line things up on the original fixed
   desktop layout) with a real flex layout, so time / description /
   price line up cleanly at any width or font.
--------------------------------------------------------------- */
.hpb-menu-price {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.hpb-menu-price li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 4px;
    padding: 10px 0;
}

.hpb-menu-price li:first-child {
    padding-top: 0;
}

.hpb-menu-price-time {
    font-weight: bold;
    white-space: nowrap;
}

.hpb-menu-price-desc {
    flex: 1 1 160px;
}

.hpb-menu-price-yen {
    font-weight: bold;
    color: #cc0000;
    white-space: nowrap;
    margin-left: auto;
}

.hpb-menu-price-note {
    flex-basis: 100%;
    font-size: 0.9em;
    color: #666666;
    line-height: 1.6;
}

.hpb-menu-price-tag {
    color: #ff0000;
    font-size: 0.9em;
    white-space: nowrap;
}

p.hpb-menu-price-tag {
    margin: 4px 0 0;
}

.hpb-menu-set-lead {
    text-align: left;
    line-height: 1.8;
    margin: 0 0 14px;
}

.hpb-menu-set-discount li {
    align-items: center;
    padding: 8px 0;
}

.hpb-menu-set-discount .hpb-menu-price-desc {
    flex: 0 0 auto;
    color: #666666;
}

.hpb-menu-set-discount .hpb-menu-price-yen {
    margin-left: 12px;
}

.hpb-hotpepper-label {
    font-size: 1.15em;
}

/* ---------------------------------------------------------------
   Top page access block: address/hours + map, shown just above the
   bottom info section on index.html only.
--------------------------------------------------------------- */
.hpb-access-block {
    width: 100%;
    box-sizing: border-box;
    padding: 40px 20px;
    text-align: center;
    clear: both;
}

.hpb-access-block-logo {
    max-width: 200px !important;
    width: 100%;
    height: auto;
    margin: 0 auto 20px;
    display: block;
}

.hpb-access-block-title {
    font-size: 1.3rem;
    margin: 0 0 20px;
    color: #33424D;
}

.hpb-access-block-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: inline-block;
    text-align: left;
}

.hpb-access-block-list li {
    font-size: 0.945rem;
    line-height: 2;
    color: #444444;
}

.hpb-access-block-list a {
    color: #33424D !important;
}

.hpb-access-block-note {
    color: #cc0000 !important;
    font-size: 0.85rem !important;
}

.hpb-access-block-reserve {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 28px;
}

.hpb-access-block-reserve-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px;
    text-decoration: none !important;
}

.hpb-access-block-reserve-icon {
    width: auto;
    height: 45px;
    max-width: 100% !important;
    object-fit: contain;
    margin-bottom: 10px;
}

.hpb-access-block-line-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #06C755;
}

.hpb-access-block-line-logo img {
    width: 26px !important;
    height: 26px !important;
    max-width: none !important;
}

.hpb-access-block-reserve-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    padding: 10px 4px;
    background: #5C7A99;
    color: #ffffff !important;
    font-size: 0.72rem;
    font-weight: bold;
    white-space: nowrap;
    border-radius: 4px;
}

.hpb-access-block-reserve-arrow {
    font-size: 1rem;
    line-height: 1;
}

.hpb-access-block-payment {
    max-width: 480px;
    margin: 0 auto 28px;
    text-align: left;
    font-size: 0.945rem;
    line-height: 1.9;
    color: #444444;
}

.hpb-access-block-payment-title {
    font-weight: bold;
    color: #33424D;
    margin: 0 0 6px;
}

.hpb-access-block-desc {
    max-width: 480px;
    margin: 0 auto 28px;
    font-size: 0.85rem;
    line-height: 1.9;
    color: #444444;
}

.hpb-access-block-map {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

/* access.html puts the map first (before the logo); index.html
   keeps it last — only add the extra gap below when it's leading. */
.hpb-access-block-map:first-child {
    margin-bottom: 28px;
}

.hpb-access-block-map iframe {
    width: 100%;
    height: 340px;
    border: 0;
    display: block;
}

/* ---------------------------------------------------------------
   FAQ page (faq.html): Q/A list, styled like the menu category
   cards — a light gray-blue "Q" row leading into a white "A" row.
--------------------------------------------------------------- */
.hpb-faq-block {
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;
    margin: 32px auto;
    padding: 0 20px;
    font-size: 1.35em;
}

.hpb-faq-item {
    border: 1px solid #DCE4EA;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.hpb-faq-q {
    background-color: #EDF1F5;
    color: #3D5A73;
    font-weight: bold;
    font-size: 1.05em;
    margin: 0;
    padding: 14px 18px;
    position: relative;
    padding-left: 44px;
}

.hpb-faq-q::before {
    content: "Q";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #5C7A99;
    font-weight: bold;
    font-size: 1.15em;
    font-style: italic;
}

.hpb-faq-a {
    background-color: #ffffff;
    color: #444444;
    margin: 0;
    padding: 16px 18px 16px 44px;
    line-height: 1.8;
    position: relative;
}

.hpb-faq-a::before {
    content: "A";
    position: absolute;
    left: 14px;
    top: 16px;
    color: #C9A657;
    font-weight: bold;
    font-size: 1.15em;
    font-style: italic;
}

.hpb-faq-a-list {
    margin: 10px 0 0;
    padding: 0 18px 16px 44px;
    background-color: #ffffff;
    list-style: none;
    text-align: left;
}

.hpb-faq-a-list li {
    position: relative;
    padding-left: 1em;
    line-height: 1.8;
    color: #444444;
}

.hpb-faq-a-list li::before {
    content: "・";
    position: absolute;
    left: 0;
}

/* ---------------------------------------------------------------
   Contact form (contact.html)
--------------------------------------------------------------- */
.hpb-contact-block {
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;
    margin: 32px auto;
    padding: 0 20px;
    text-align: left;
    /* よくある質問ページ(.hpb-faq-block)と文字サイズを揃える */
    font-size: 1.35em;
}

.hpb-contact-lead {
    line-height: 1.9;
    margin-bottom: 28px;
}

.hpb-contact-lead a {
    color: #5C7A99;
}

.hpb-contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.hpb-contact-field {
    margin-bottom: 24px;
}

.hpb-contact-label {
    display: block;
    font-weight: bold;
    color: #3D5A73;
    margin-bottom: 8px;
}

.hpb-contact-required {
    display: inline-block;
    color: #cc0000;
    font-size: 0.8em;
    font-weight: bold;
    margin-left: 6px;
}

.hpb-contact-input,
.hpb-contact-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #DCE4EA;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 1em;
    font-family: inherit;
    background-color: #ffffff;
}

.hpb-contact-input:focus,
.hpb-contact-textarea:focus {
    outline: none;
    border-color: #5C7A99;
}

.hpb-contact-textarea {
    resize: vertical;
}

.hpb-contact-tel {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hpb-contact-tel input {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.hpb-contact-tel-sep {
    color: #666666;
}

.hpb-contact-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.hpb-contact-checks label,
.hpb-contact-agree {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    cursor: pointer;
}

.hpb-contact-checks input,
.hpb-contact-agree input {
    width: auto;
    flex-shrink: 0;
}

.hpb-contact-agree a {
    color: #5C7A99;
}

.hpb-contact-submit-btn {
    display: block;
    width: 100%;
    background-color: #5C7A99;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.1em;
    padding: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 8px;
}

.hpb-contact-submit-btn:hover,
.hpb-contact-submit-btn:active {
    background-color: #3D5A73;
}

.hpb-contact-note {
    font-size: 0.8em;
    color: #666666;
    line-height: 1.8;
    margin-top: 24px;
}

/* ---------------------------------------------------------------
   Top page bottom info block: nav link list + salon info card,
   full-width dark section shown at the bottom of index.html only.
--------------------------------------------------------------- */
.hpb-bottom-info {
    width: 100%;
    background: #33424D;
    box-sizing: border-box;
    padding: 40px 20px;
    clear: both;
}

.hpb-bottom-nav {
    list-style: none;
    margin: 0 auto 36px;
    padding: 0;
    max-width: 480px;
    text-align: center;
}

.hpb-bottom-nav li a {
    display: block;
    padding: 8px 0;
    color: #ffffff !important;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-decoration: none !important;
}

.hpb-bottom-card {
    max-width: 480px;
    margin: 0 auto;
    text-align: center !important;
    color: #ffffff;
}

.hpb-bottom-card-logo {
    max-width: 150px !important;
    width: 100%;
    height: auto;
    margin: 0 auto 14px;
    display: block;
    filter: brightness(0) invert(1);
}

.hpb-bottom-card-name {
    font-size: 0.95rem;
    font-weight: bold;
    margin: 0 0 12px;
    letter-spacing: 0.03em;
    text-align: center !important;
}

.hpb-bottom-card-desc {
    font-size: 0.8rem;
    line-height: 1.8;
    margin: 0 0 16px;
    color: #E4E8EA;
    text-align: center !important;
}

.hpb-bottom-card-address,
.hpb-bottom-card-tel {
    font-size: 0.8rem;
    margin: 0 0 6px;
    color: #E4E8EA;
    text-align: center !important;
}

.hpb-bottom-card-tel {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0;
}

.hpb-bottom-card-tel a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ---------------------------------------------------------------
   Top-page hero gallery: swipeable, horizontally-scrolling photos
   at the very top of index.html (hero-main.jpg + room photo, more
   can be added the same way). Fixed aspect ratio (matching
   hero-main.jpg) with object-fit:cover keeps every slide the same
   height regardless of each photo's own proportions.
--------------------------------------------------------------- */
.hpb-hero-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.hpb-hero-gallery-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 941 / 1672;
    overflow: hidden;
}

.hpb-hero-gallery-slide img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
}

.hpb-hero-gallery-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}

.hpb-hero-gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C9D2D8;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hpb-hero-gallery-dot.is-active {
    background: #5C7A99;
    transform: scale(1.25);
}

/* ---------------------------------------------------------------
   本文の文字サイズを、よくある質問・メニュー・お問い合わせ・ご予約
   (どれも本文 1.35em = スマホ幅で約15.12px)に揃える。
   トップのサロン紹介、プライバシーポリシー、予約完了/お問い合わせ完了ページ。
--------------------------------------------------------------- */
#concept p font {
    font-size: 1.35em !important;
}

#privacy {
    font-size: 1.35em;
}

#hpb-wrapper > p.large {
    font-size: 1.35em;
}