/* ================================================================= Makana INDIBA SALON — main.css ブランド：ダークブラウン/ゴールド/アイボリー/ベージュ・上品で静かな余白 ================================================================= */ /* ---------- Design tokens ---------- */ :root { --c-brown: #4A3F35; --c-brown-2: #6E6053; --c-brown-3: #8C7E6E; --c-gold: #C6A77B; --c-gold-2: #B5915F; --c-ivory: #F7F4EF; --c-beige: #DCCFBF; --c-paper: #F1EAE0; --c-card: #FCFAF6; --c-on-dark: #F2EBE0; --c-on-dark-2: #CDBFAC; --c-line: rgba(74, 63, 53, .14); --c-line-strong: rgba(74, 63, 53, .26); --c-gold-line: rgba(198, 167, 123, .55); --footer-bg: #3F352B; --font-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; --font-en: "Cormorant Garamond", "Noto Serif JP", serif; --font-script: "Allura", "Cormorant Garamond", cursive; --maxw: 1140px; --maxw-narrow: 760px; --radius: 4px; --shadow-soft: 0 20px 48px -28px rgba(74, 63, 53, .45); --shadow-card: 0 14px 30px -20px rgba(74, 63, 53, .4); --ease: cubic-bezier(.22, .61, .36, 1); --header-h: 72px; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-jp); font-size: 1rem; line-height: 2; letter-spacing: .03em; color: var(--c-brown); background: var(--c-ivory); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--c-brown); text-decoration: none; transition: color .3s var(--ease); } a:hover { color: var(--c-gold-2); } h1, h2, h3, h4 { font-weight: 500; line-height: 1.5; letter-spacing: .04em; margin: 0 0 .6em; } p { margin: 0 0 1.4em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } blockquote { margin: 0; } :focus-visible { outline: 2px solid var(--c-gold-2); outline-offset: 3px; } .script { font-family: var(--font-script); letter-spacing: .01em; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; } .container--narrow { max-width: var(--maxw-narrow); } .section { padding-block: clamp(3.4rem, 2.4rem + 4vw, 6rem); position: relative; } .section--alt { background: var(--c-paper); } .rounded { border-radius: var(--radius); overflow: hidden; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); background: var(--c-brown); color: var(--c-ivory); padding: .6em 1.2em; border-radius: 0 0 var(--radius) var(--radius); z-index: 2000; transition: top .25s var(--ease); } .skip-link:focus { top: 0; color: var(--c-ivory); } /* ---------- Icons ---------- */ .icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: middle; flex: none; } /* ---------- Section heads / eyebrow ---------- */ .section__head { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); } .eyebrow { font-family: var(--font-en); font-size: .82rem; letter-spacing: .42em; text-transform: uppercase; color: var(--c-gold-2); margin: 0 0 1rem; display: inline-flex; align-items: center; gap: .8em; line-height: 1; } .eyebrow::before, .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--c-gold-line); } .section__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem); margin: 0; } .section__title--left { text-align: left; } .section__desc { margin-top: 1rem; color: var(--c-brown-2); font-size: .98rem; } .section__more { text-align: center; margin-top: clamp(2rem, 1.4rem + 1.6vw, 2.8rem); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font-family: var(--font-jp); font-size: .95rem; font-weight: 500; letter-spacing: .08em; padding: .9em 2em; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); line-height: 1.4; text-align: center; } .btn--primary { background: var(--c-brown); color: var(--c-ivory); } .btn--primary:hover { background: #5C4F41; color: var(--c-ivory); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--c-brown); border-color: var(--c-line-strong); } .btn--ghost:hover { background: var(--c-brown); color: var(--c-ivory); border-color: var(--c-brown); transform: translateY(-2px); } .btn--sm { padding: .62em 1.3em; font-size: .85rem; } .btn--lg { padding: 1.02em 2.4em; font-size: 1rem; } .btn--block { width: 100%; } .btn__icon { width: 1.2em; height: 1.2em; } .btn__icon-after { width: 1.1em; height: 1.1em; transition: transform .3s var(--ease); } .btn:hover .btn__icon-after { transform: translateX(3px); } .btn.is-pending { cursor: default; opacity: .85; position: relative; } .btn.is-pending:hover { transform: none; } .btn--primary.is-pending { background: var(--c-brown-3); } .btn--ghost.is-pending { color: var(--c-brown-3); border-color: var(--c-line); } .btn__badge { font-size: .62rem; letter-spacing: .12em; background: var(--c-gold); color: #fff; padding: .15em .6em; border-radius: 999px; margin-left: .2em; line-height: 1.6; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(247, 244, 239, .92); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--c-line); } .site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; } .site-header__brand { flex: none; } .brand__logo, .custom-logo { width: auto; height: 44px; } .site-nav { margin-inline: auto; } .nav__list { display: flex; align-items: center; gap: clamp(1rem, .4rem + 1.4vw, 2.1rem); } .nav__list .menu-item > a { font-size: .92rem; letter-spacing: .06em; color: var(--c-brown); position: relative; padding-block: .4em; } .nav__list .menu-item > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--c-gold-2); transition: right .35s var(--ease); } .nav__list .menu-item > a:hover::after, .nav__list .menu-item > a[aria-current]::after { right: 0; } .site-header__actions { display: flex; align-items: center; gap: .8rem; flex: none; } /* hamburger */ .nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--c-line-strong); background: transparent; border-radius: var(--radius); position: relative; cursor: pointer; } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 50%; width: 20px; height: 1.5px; background: var(--c-brown); transition: transform .3s var(--ease), opacity .3s var(--ease); transform: translateX(-50%); } .nav-toggle__bars { top: 50%; transform: translate(-50%, -50%); } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } .nav-open .nav-toggle__bars { background: transparent; } .nav-open .nav-toggle__bars::before { top: 0; transform: translateX(-50%) rotate(45deg); } .nav-open .nav-toggle__bars::after { top: 0; transform: translateX(-50%) rotate(-45deg); } /* mobile drawer */ .nav-overlay { position: fixed; inset: 0; background: rgba(63, 53, 43, .4); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; z-index: 1100; } .nav-open .nav-overlay { opacity: 1; visibility: visible; } .mobile-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: var(--c-ivory); transform: translateX(100%); transition: transform .4s var(--ease); z-index: 1200; overflow-y: auto; box-shadow: -20px 0 50px -30px rgba(74, 63, 53, .6); visibility: hidden; } .nav-open .mobile-nav { transform: translateX(0); visibility: visible; } .mobile-nav__inner { padding: 2.4rem 1.8rem; } .mobile-nav__flower { display: block; color: var(--c-gold); width: 40px; margin: 0 auto 1.6rem; } .mobile-nav__flower .icon { width: 40px; height: 40px; } .mobile-nav__list { display: flex; flex-direction: column; } .mobile-nav__list .menu-item { border-bottom: 1px solid var(--c-line); } .mobile-nav__list .menu-item > a { display: block; padding: .95em .2em; font-size: 1rem; letter-spacing: .05em; } .mobile-nav__cta { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.8rem; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: min(86vh, 760px); display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(247, 244, 239, .35) 0%, rgba(247, 244, 239, .55) 55%, rgba(247, 244, 239, .82) 100%); } .hero__inner { padding: 5rem 22px; max-width: 760px; } .hero__eyebrow { font-family: var(--font-en); letter-spacing: .4em; text-transform: uppercase; font-size: .78rem; color: var(--c-gold-2); margin: 0 0 .8rem; } .hero__script { font-size: clamp(3.4rem, 2.4rem + 6vw, 6rem); color: var(--c-brown); margin: 0 0 .1em; line-height: 1; } .hero__title { font-size: clamp(1.2rem, 0.95rem + 1.7vw, 2.05rem); letter-spacing: .06em; margin: 0 0 1rem; line-height: 1.7; } .hero__lead { font-size: clamp(.98rem, .9rem + .4vw, 1.12rem); color: var(--c-brown-2); letter-spacing: .14em; margin: 0 0 2.2rem; } .hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .hero__scroll { position: absolute; bottom: 22px; left: 50%; width: 1px; height: 46px; background: var(--c-gold-line); transform: translateX(-50%); } .hero__scroll::after { content: ""; position: absolute; left: 50%; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--c-gold-2); transform: translateX(-50%); animation: heroDot 2.4s var(--ease) infinite; } @keyframes heroDot { 0% { top: 0; opacity: 0; } 30% { opacity: 1; } 100% { top: 42px; opacity: 0; } } /* ---------- Concept ---------- */ .concept__body { text-align: center; color: var(--c-brown-2); } .concept__body p { font-size: 1.04rem; letter-spacing: .06em; } /* ---------- Concerns ---------- */ .concerns__list { display: grid; gap: .9rem; max-width: 620px; margin-inline: auto; } .concerns__item { display: flex; align-items: flex-start; gap: .9rem; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1rem 1.3rem; } .concerns__icon { color: var(--c-gold-2); margin-top: .35em; width: 1.05em; height: 1.05em; } .concerns__note { text-align: center; margin-top: 1.8rem; color: var(--c-brown-2); } /* ---------- Feature split ---------- */ .feature-split { display: grid; gap: clamp(1.6rem, 1rem + 3vw, 3.4rem); align-items: center; } .feature-split__media .ph-img, .feature-split__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-soft); } .feature-split__body .section__title { margin-bottom: 1rem; } .owner__img { max-width: 420px; margin-inline: auto; } /* ---------- Menu ---------- */ .menu-grid { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); } .menu-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .menu-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .menu-card__media .ph-img, .menu-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .menu-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .menu-card__name { font-family: var(--font-en); font-size: 1.4rem; letter-spacing: .08em; margin: 0; } .menu-card__desc { font-size: .94rem; color: var(--c-brown-2); line-height: 1.9; margin: 0; flex: 1; } .menu-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .4rem 0 0; padding-top: .9rem; border-top: 1px solid var(--c-line); } .menu-card__time { display: inline-flex; align-items: center; gap: .4em; font-size: .85rem; color: var(--c-brown-2); } .menu-card__icon { width: 1.05em; height: 1.05em; color: var(--c-gold-2); } .menu-card__price { font-family: var(--font-en); font-size: 1.25rem; color: var(--c-brown); letter-spacing: .03em; } .menu__note { text-align: center; margin-top: 1.6rem; font-size: .82rem; color: var(--c-brown-3); } /* ---------- CTA band ---------- */ .cta-band { background: var(--c-brown); color: var(--c-on-dark); text-align: center; padding-block: clamp(3rem, 2.2rem + 3vw, 5rem); position: relative; overflow: hidden; } .cta-band__flower { position: absolute; top: 50%; left: 50%; width: 320px; height: 320px; transform: translate(-50%, -50%); color: rgba(198, 167, 123, .12); } .cta-band__flower .icon { width: 320px; height: 320px; } .cta-band__inner { position: relative; max-width: 680px; } .cta-band__catch { font-family: var(--font-jp); font-size: 1.05rem; letter-spacing: .1em; color: var(--c-gold); margin: 0 0 .6rem; } .cta-band__title { color: var(--c-ivory); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); margin: 0 0 .9rem; } .cta-band__lead { color: var(--c-on-dark-2); margin: 0 0 2rem; } .cta-band__buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .cta-band .btn--ghost { color: var(--c-ivory); border-color: rgba(242, 235, 224, .4); } .cta-band .btn--ghost:hover { background: var(--c-ivory); color: var(--c-brown); border-color: var(--c-ivory); } .cta-band .btn--primary { background: var(--c-gold); color: #fff; } .cta-band .btn--primary:hover { background: var(--c-gold-2); } .cta-band .btn--primary.is-pending { background: rgba(198, 167, 123, .5); } .cta-band__methods { margin: 1.6rem 0 0; font-size: .8rem; letter-spacing: .08em; color: var(--c-on-dark-2); } /* ---------- Features ---------- */ .feature-grid { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); } .feature { text-align: center; padding: 1.8rem 1.4rem; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); } .feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--c-gold-line); color: var(--c-gold-2); margin-bottom: 1.1rem; } .feature__icon .icon { width: 30px; height: 30px; } .feature__title { font-size: 1.08rem; margin: 0 0 .5rem; } .feature__desc { font-size: .92rem; color: var(--c-brown-2); margin: 0; line-height: 1.9; } /* ---------- Flow ---------- */ .flow__list { display: grid; gap: 0; max-width: 720px; margin-inline: auto; } .flow__item { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding: 1.4rem 0; position: relative; } .flow__item:not(:last-child) { border-bottom: 1px solid var(--c-line); } .flow__num { font-family: var(--font-en); font-size: 1.9rem; color: var(--c-gold); line-height: 1; min-width: 2ch; } .flow__en { font-family: var(--font-en); font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--c-brown-3); margin: 0 0 .2rem; } .flow__title { font-size: 1.12rem; margin: 0 0 .3rem; } .flow__desc { font-size: .94rem; color: var(--c-brown-2); margin: 0; } /* ---------- Owner ---------- */ .owner__career { display: grid; gap: .55rem; margin: 1.4rem 0 .6rem; padding-top: 1.2rem; border-top: 1px solid var(--c-line); } .owner__career li { display: flex; align-items: flex-start; gap: .7rem; font-size: .92rem; color: var(--c-brown-2); } .owner__career-icon { color: var(--c-gold-2); margin-top: .3em; width: 1.05em; height: 1.05em; } .owner__note { font-size: .78rem; color: var(--c-brown-3); margin: 0; } /* ---------- Post grid / cards ---------- */ .post-grid { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); } .post-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .post-thumb { display: block; overflow: hidden; } .post-thumb__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease); } .post-card:hover .post-thumb__img { transform: scale(1.04); } .post-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; } .post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; font-size: .78rem; color: var(--c-brown-3); } .entry-date { font-family: var(--font-en); letter-spacing: .08em; } .entry-date--updated { color: var(--c-brown-3); } .entry-date__label { background: var(--c-beige); color: var(--c-brown); padding: .05em .5em; border-radius: 3px; margin-right: .3em; font-family: var(--font-jp); font-size: .72rem; } .entry-cats, .post-card__cats { display: inline-flex; flex-wrap: wrap; gap: .4rem; } .entry-cat { font-size: .74rem; letter-spacing: .06em; color: var(--c-gold-2); border: 1px solid var(--c-gold-line); border-radius: 999px; padding: .1em .8em; } .entry-cat:hover { background: var(--c-gold); color: #fff; border-color: var(--c-gold); } .post-card__title { font-size: 1.08rem; line-height: 1.6; margin: 0; } .post-card__excerpt { font-size: .9rem; color: var(--c-brown-2); margin: 0; flex: 1; } .post-card__more { display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-en); font-size: .85rem; letter-spacing: .1em; color: var(--c-gold-2); margin-top: .3rem; } .news__empty { text-align: center; color: var(--c-brown-2); padding: 2rem 0; } /* ---------- Voice ---------- */ .voice-grid { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2rem); } .voice-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 2rem 1.7rem 1.7rem; position: relative; } .voice-card__mark { font-family: var(--font-en); font-size: 3rem; color: var(--c-gold); line-height: .6; position: absolute; top: 1.1rem; left: 1.3rem; opacity: .5; } .voice-card__text { font-size: .96rem; color: var(--c-brown); line-height: 2; margin: .6rem 0 1rem; position: relative; } .voice-card__attr { font-size: .8rem; color: var(--c-brown-3); letter-spacing: .06em; } .voice__note, .case__note { text-align: center; font-size: .8rem; color: var(--c-brown-3); margin-top: 1.4rem; } .case__note { max-width: 640px; margin-inline: auto; } /* ---------- FAQ ---------- */ .faq { display: grid; gap: .9rem; } .faq__item { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; } .faq__q { display: flex; align-items: flex-start; gap: .8rem; padding: 1.1rem 1.4rem; cursor: pointer; list-style: none; font-weight: 500; position: relative; } .faq__q::-webkit-details-marker { display: none; } .faq__q-icon, .faq__a-icon { font-family: var(--font-en); font-weight: 600; color: var(--c-gold-2); flex: none; width: 1.4em; line-height: 1.6; } .faq__a-icon { color: var(--c-brown-3); } .faq__q-text { flex: 1; } .faq__toggle { position: relative; width: 14px; height: 14px; flex: none; margin-top: .5em; } .faq__toggle::before, .faq__toggle::after { content: ""; position: absolute; background: var(--c-gold-2); transition: transform .3s var(--ease), opacity .3s var(--ease); } .faq__toggle::before { top: 6px; left: 0; width: 14px; height: 1.5px; } .faq__toggle::after { left: 6px; top: 0; width: 1.5px; height: 14px; } .faq__item[open] .faq__toggle::after { transform: scaleY(0); opacity: 0; } .faq__a { display: flex; gap: .8rem; padding: 0 1.4rem 1.3rem; color: var(--c-brown-2); } .faq__a p { margin: 0; font-size: .94rem; } /* ---------- Info table ---------- */ .info-table { border-top: 1px solid var(--c-line); } .info-row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 1rem .2rem; border-bottom: 1px solid var(--c-line); } .info-row dt { font-weight: 500; color: var(--c-brown); letter-spacing: .08em; font-size: .92rem; } .info-row dd { margin: 0; color: var(--c-brown-2); } .info-note { display: block; font-size: .8rem; color: var(--c-brown-3); margin-top: .2rem; } .info__note { font-size: .8rem; color: var(--c-brown-3); margin-top: 1.4rem; } /* ---------- Access ---------- */ .access { display: grid; gap: clamp(1.6rem, 1rem + 3vw, 3rem); align-items: start; } .access__map-img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-soft); } .access__map-note { font-size: .8rem; color: var(--c-brown-3); margin-top: .8rem; } .access__info { font-size: .98rem; } .access__addr, .access__line { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 .8rem; color: var(--c-brown-2); } .access__icon { color: var(--c-gold-2); margin-top: .3em; width: 1.1em; height: 1.1em; } /* ---------- Instagram ---------- */ .ig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 920px; margin-inline: auto; } .ig-tile { overflow: hidden; border-radius: 2px; } .ig-tile__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .6s var(--ease); } .ig-tile:hover .ig-tile__img { transform: scale(1.06); } .ig__btn { margin-top: 0; } /* ---------- SNS link ---------- */ .sns-link { display: inline-flex; align-items: center; gap: .5em; } .sns-link__icon { width: 1.3em; height: 1.3em; } .sns-link.is-pending { color: var(--c-brown-3); } /* ---------- Page hero / breadcrumb ---------- */ .page-hero { text-align: center; padding: clamp(2.6rem, 2rem + 3vw, 4.2rem) 0 clamp(1.4rem, 1rem + 1vw, 2rem); background: var(--c-paper); position: relative; } .page-hero__flower { display: block; width: 40px; margin: 0 auto 1rem; color: var(--c-gold); } .page-hero__flower .icon { width: 40px; height: 40px; } .page-hero__eyebrow { font-family: var(--font-en); letter-spacing: .36em; text-transform: uppercase; font-size: .78rem; color: var(--c-gold-2); margin: 0 0 .6rem; } .page-hero__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); margin: 0; } .page-hero__lead { margin: 1rem auto 0; max-width: 640px; color: var(--c-brown-2); font-size: .98rem; } .breadcrumb { padding: 1rem 0 .2rem; font-size: .78rem; } .breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--c-brown-3); } .breadcrumb__item { display: inline-flex; align-items: center; } .breadcrumb__item:not(:last-child)::after { content: "›"; margin-left: .5rem; color: var(--c-brown-3); } .breadcrumb__item a { color: var(--c-brown-2); } .breadcrumb__item [aria-current] { color: var(--c-brown-3); } /* ---------- Page body / entry content (Gutenberg) ---------- */ .page-body { padding-block: clamp(2rem, 1.4rem + 2vw, 3.2rem); } .entry-content > * + * { margin-top: 1.4em; } .entry-content h2 { font-size: 1.5rem; margin-top: 2.2em; padding-bottom: .4em; border-bottom: 1px solid var(--c-line); } .entry-content h3 { font-size: 1.22rem; margin-top: 1.8em; } .entry-content h4 { font-size: 1.08rem; margin-top: 1.6em; } .entry-content p { line-height: 2.05; } .entry-content a { color: var(--c-gold-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .entry-content ul, .entry-content ol { padding-left: 1.4em; } .entry-content ul li { list-style: disc; margin-bottom: .5em; } .entry-content ol li { list-style: decimal; margin-bottom: .5em; } .entry-content img, .entry-content .wp-block-image img { border-radius: var(--radius); } .entry-content figcaption { font-size: .8rem; color: var(--c-brown-3); text-align: center; margin-top: .6em; } .entry-content blockquote, .entry-content .wp-block-quote { border-left: 2px solid var(--c-gold); padding: .4em 0 .4em 1.4em; color: var(--c-brown-2); font-style: italic; } .entry-content table { width: 100%; border-collapse: collapse; font-size: .92rem; } .entry-content th, .entry-content td { border: 1px solid var(--c-line); padding: .7em 1em; text-align: left; } .entry-content th { background: var(--c-paper); font-weight: 500; } .entry-content hr, .entry-content .wp-block-separator { border: 0; height: 1px; background: var(--c-beige); margin: 2.4em auto; max-width: 120px; } .page-links { margin-top: 2rem; display: flex; gap: .5rem; justify-content: center; } .page-links a, .page-links > span { border: 1px solid var(--c-line); border-radius: var(--radius); padding: .3em .8em; } /* ---------- Single ---------- */ .single .breadcrumb { max-width: var(--maxw-narrow); margin-inline: auto; } .entry__header { text-align: center; padding-block: clamp(1.4rem, 1rem + 1.6vw, 2.4rem) clamp(1.4rem, 1rem + 1vw, 2rem); } .entry__cats { justify-content: center; margin-bottom: 1rem; } .entry__title { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.3rem); line-height: 1.5; margin: 0 0 1rem; } .entry__meta { display: flex; gap: 1rem; justify-content: center; font-size: .82rem; color: var(--c-brown-3); } .entry__featured { margin: 0 auto clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); max-width: var(--maxw); } .entry__featured-img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); } .entry-content.container { padding-block: 0; } .entry__footer { margin-top: 2.4rem; } .entry__tags { display: flex; flex-wrap: wrap; gap: .5rem; } .entry__tags li a { font-size: .8rem; color: var(--c-brown-2); border: 1px solid var(--c-line); border-radius: 999px; padding: .15em .9em; } .post-nav { display: grid; gap: 1rem; margin-top: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); } .post-nav__link { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.3rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-card); transition: border-color .3s var(--ease), transform .3s var(--ease); } .post-nav__link:hover { border-color: var(--c-gold-line); transform: translateY(-2px); } .post-nav__link--next { text-align: right; } .post-nav__dir { font-family: var(--font-en); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold-2); } .post-nav__title { font-size: .94rem; color: var(--c-brown); } .back-to-list { text-align: center; margin-top: 2rem; } /* ---------- Pagination ---------- */ .pagination { margin-top: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); } .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 .6em; border: 1px solid var(--c-line); border-radius: var(--radius); font-family: var(--font-en); color: var(--c-brown); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .pagination .page-numbers:hover { border-color: var(--c-gold-line); color: var(--c-gold-2); } .pagination .page-numbers.current { background: var(--c-brown); color: var(--c-ivory); border-color: var(--c-brown); } .pagination .page-numbers.dots { border-color: transparent; } /* ---------- Search / none ---------- */ .search__form-wrap { margin-bottom: 2rem; } .search__count { margin-bottom: 1.6rem; color: var(--c-brown-2); font-size: .9rem; } .search-form { display: flex; gap: .6rem; max-width: 520px; margin-inline: auto; } .search-field { flex: 1; border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: .7em 1em; font-family: var(--font-jp); font-size: .95rem; background: var(--c-card); color: var(--c-brown); } .search-submit { background: var(--c-brown); color: var(--c-ivory); border: 0; border-radius: var(--radius); padding: 0 1.4em; cursor: pointer; font-family: var(--font-jp); letter-spacing: .08em; } .search-submit:hover { background: #5C4F41; } .none { text-align: center; padding: 2rem 0 1rem; } .none__text { color: var(--c-brown-2); margin-bottom: 1.6rem; } .none__search { margin-bottom: 1.6rem; } /* ---------- Legal ---------- */ .legal h2 { font-size: 1.2rem; margin-top: 2em; padding-bottom: .35em; border-bottom: 1px solid var(--c-line); } .legal__note { background: var(--c-paper); border-left: 2px solid var(--c-gold); padding: 1em 1.2em; font-size: .9rem; color: var(--c-brown-2); } .legal__check { display: block; margin-top: .5em; font-size: .82rem; color: var(--c-gold-2); background: rgba(198, 167, 123, .1); border: 1px dashed var(--c-gold-line); border-radius: var(--radius); padding: .5em .8em; } /* ---------- Footer ---------- */ .site-footer { background: var(--footer-bg); color: var(--c-on-dark-2); padding-top: clamp(3rem, 2.2rem + 3vw, 4.5rem); } .site-footer__inner { display: grid; gap: 2.4rem; max-width: var(--maxw); margin-inline: auto; padding: 0 22px 2.6rem; } .brand--footer { display: inline-block; } .brand--footer .brand__logo { height: 56px; } .site-footer__msg { font-size: .9rem; letter-spacing: .08em; color: var(--c-gold); margin: 1rem 0 0; } .site-footer__heading { font-family: var(--font-en); font-size: .82rem; letter-spacing: .26em; text-transform: uppercase; color: var(--c-on-dark); margin: 0 0 1.1rem; } .site-footer__list { display: grid; gap: .7rem; } .site-footer__list a { color: var(--c-on-dark-2); font-size: .92rem; } .site-footer__list a:hover { color: var(--c-gold); } .site-footer__store { font-size: .9rem; line-height: 1.9; color: var(--c-on-dark-2); margin: 0 0 1.2rem; } .site-footer__sns { color: var(--c-on-dark); } .site-footer__sns:hover { color: var(--c-gold); } .site-footer__bottom { border-top: 1px solid rgba(242, 235, 224, .12); padding: 1.4rem 22px; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: center; max-width: var(--maxw); margin-inline: auto; } .site-footer__copy { font-family: var(--font-en); letter-spacing: .1em; font-size: .78rem; color: var(--c-on-dark-2); } .site-footer__legal { font-size: .78rem; color: var(--c-on-dark-2); } .site-footer__legal:hover { color: var(--c-gold); } /* ---------- Mobile sticky CTA ---------- */ .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none; gap: .6rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(247, 244, 239, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--c-line); } .mobile-cta__btn { flex: 1; padding: .85em .4em; font-size: .9rem; } /* ---------- Reveal animation ---------- */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .js .reveal.is-visible { opacity: 1; transform: none; } /* ================================================================= Responsive ================================================================= */ @media (min-width: 600px) { .concerns__list { grid-template-columns: 1fr 1fr; } .menu-grid { grid-template-columns: 1fr 1fr; } .feature-grid { grid-template-columns: 1fr 1fr; } .voice-grid { grid-template-columns: 1fr 1fr; } .post-grid { grid-template-columns: 1fr 1fr; } .post-nav { grid-template-columns: 1fr 1fr; } .ig-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } .menu-grid { grid-template-columns: repeat(2, 1fr); } .post-grid { grid-template-columns: repeat(3, 1fr); } .voice-grid { grid-template-columns: repeat(3, 1fr); } .feature-split { grid-template-columns: 1fr 1fr; } .feature-split--reverse .feature-split__media { order: 2; } .access { grid-template-columns: 1.3fr 1fr; } .site-footer__inner { grid-template-columns: 1.4fr 1fr 1.2fr; } .ig-grid { grid-template-columns: repeat(6, 1fr); } } /* Desktop nav vs mobile drawer switch */ @media (max-width: 900px) { .site-nav { display: none; } .site-header__cta { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } .mobile-cta { display: flex; } body { padding-bottom: 74px; } } @media (min-width: 901px) { .nav-toggle { display: none; } .mobile-nav, .nav-overlay { display: none; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js .reveal { opacity: 1; transform: none; } .hero__scroll::after { animation: none; } } /* ============================================================ * v2 追加・修正（ヘッダー／ヒーロー／下層ページ） * ※ 後勝ちのカスケードで既存ルールを上書き * ============================================================ */ /* --- ヘッダー：スマホのメニューボタンを右端へ／デスクトップのナビを中央へ --- */ .site-header__actions { margin-left: auto; } @media (min-width: 901px) { .site-nav { margin-inline: 0; flex: 1; display: flex; justify-content: center; } } /* --- ヘッダー：ブランド書体のロゴタイプ（小サイズでも明瞭） --- */ .brand-lockup { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; line-height: 1; } .brand-lockup__mark { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; flex: none; } .brand-lockup__mark .icon { width: 42px; height: 42px; } .brand-lockup__text { display: flex; flex-direction: column; gap: .14em; } .brand-lockup__name { font-family: var(--font-script); font-size: 2rem; color: var(--c-brown); line-height: .9; } .brand-lockup__sub { font-family: var(--font-en); font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--c-gold-2); padding-left: .12em; } @media (max-width: 600px) { .brand-lockup__mark, .brand-lockup__mark .icon { width: 36px; height: 36px; } .brand-lockup__name { font-size: 1.66rem; } .brand-lockup__sub { font-size: .56rem; letter-spacing: .3em; } } /* --- ヒーロー：タイトルの不自然な改行（孤立文字）を防ぐ --- */ .hero__title { text-wrap: balance; word-break: auto-phrase; } /* --- セクション内リンクの左寄せバリアント --- */ .section__more--left { text-align: left; margin-top: 1.6rem; } .section__desc { text-align: center; color: var(--c-brown-2); max-width: 640px; margin: 0 auto; } /* --- コンセプト：ストーリー --- */ .story__item { padding: 2.2rem 0; } .story__item + .story__item { border-top: 1px solid var(--c-gold-line); } .story__heading { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); letter-spacing: .08em; margin: 0 0 1rem; text-align: center; } .story p { color: var(--c-brown-2); font-size: 1rem; } /* --- コンセプト：3つの価値 --- */ .pillars { display: grid; gap: 1.4rem; } @media (min-width: 700px) { .pillars { grid-template-columns: repeat(3, 1fr); } } .pillar { text-align: center; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 2.2rem 1.4rem; } .pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--c-gold-line); color: var(--c-gold-2); margin-bottom: 1rem; } .pillar__icon .icon { width: 28px; height: 28px; } .pillar__title { font-size: 1.05rem; letter-spacing: .08em; margin: 0 0 .5rem; } .pillar__body { font-size: .92rem; color: var(--c-brown-2); line-height: 1.9; margin: 0; } /* --- コンセプト：引用バンド --- */ .quote-band__inner { text-align: center; } .quote-band__text { font-family: var(--font-en); font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.1rem); color: var(--c-brown); letter-spacing: .06em; line-height: 1.7; margin: 0; } /* --- メニュー詳細（左右交互） --- */ .menu-detail { display: grid; gap: clamp(2.6rem, 1.6rem + 3vw, 4.2rem); } .menu-detail__item { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 2.8rem); align-items: center; } .menu-detail__media .ph-img, .menu-detail__media img { width: 100%; box-shadow: var(--shadow-soft); } @media (min-width: 900px) { .menu-detail__item { grid-template-columns: 1fr 1fr; } .menu-detail__item:nth-child(even) .menu-detail__media { order: 2; } } .menu-detail__no { font-family: var(--font-en); letter-spacing: .24em; text-transform: uppercase; color: var(--c-gold-2); font-size: .82rem; margin: 0 0 .4rem; } .menu-detail__name { font-family: var(--font-en); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); letter-spacing: .06em; margin: 0 0 1rem; } .menu-detail__desc { color: var(--c-brown-2); margin: 0 0 1.2rem; } .menu-detail__rec-title { font-size: .92rem; font-weight: 600; color: var(--c-brown); margin: 0 0 .6rem; } .menu-detail__rec { display: grid; gap: .5rem; margin: 0 0 1.4rem; padding: 0; list-style: none; } .menu-detail__rec li { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; color: var(--c-brown-2); } .menu-detail__rec-icon { color: var(--c-gold-2); width: 1.05em; height: 1.05em; margin-top: .3em; flex: none; } .menu-detail__meta { display: flex; align-items: baseline; gap: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--c-line); margin: 0; } .menu__note { font-size: .8rem; color: var(--c-brown-3); margin-top: 1.6rem; text-align: center; } /* --- 初めての方へ：ご準備 --- */ .prepare { display: grid; gap: 0; } .prepare dd { margin: 0; } .prepare__item { padding: 1.3rem 0; border-bottom: 1px solid var(--c-line); } .prepare__item:first-child { border-top: 1px solid var(--c-line); } .prepare__title { font-size: 1.02rem; color: var(--c-brown); margin: 0 0 .4rem; position: relative; padding-left: 1rem; } .prepare__title::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold); } .prepare__body { margin: 0; color: var(--c-brown-2); font-size: .96rem; } /* --- サロン紹介：ギャラリー --- */ .gallery { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: clamp(1.6rem, 1rem + 2vw, 2.6rem); } @media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); } } .gallery__img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-card); } /* --- アクセス：道順・補足 --- */ .directions { list-style: none; counter-reset: dir; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .9rem; } .directions__item { counter-increment: dir; display: flex; align-items: flex-start; gap: .9rem; color: var(--c-brown-2); } .directions__item::before { content: counter(dir); font-family: var(--font-en); color: var(--c-gold-2); border: 1px solid var(--c-gold-line); border-radius: 50%; width: 1.9em; height: 1.9em; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: .85rem; } .access__subtitle { font-size: 1rem; letter-spacing: .08em; margin: 1.6rem 0 .7rem; padding-bottom: .4rem; border-bottom: 1px solid var(--c-gold-line); } .access__subtitle:first-child { margin-top: 0; } .access__line { color: var(--c-brown-2); margin: 0; font-size: .96rem; } .access-teaser__line { display: flex; align-items: flex-start; gap: .6rem; color: var(--c-brown-2); margin: 0 0 .7rem; } .access__icon { color: var(--c-gold-2); width: 1.1em; height: 1.1em; margin-top: .25em; flex: none; } /* --- FAQ：カテゴリ別 --- */ .faq { display: grid; gap: .8rem; } .faq-group + .faq-group { margin-top: clamp(2rem, 1.4rem + 1.6vw, 3rem); } .faq-group__title { font-family: var(--font-en); font-size: 1.3rem; letter-spacing: .1em; color: var(--c-brown); margin: 0 0 1.2rem; padding-bottom: .5rem; border-bottom: 1px solid var(--c-gold-line); } /* --- Instagram タイル（保険） --- */ .ig-tile__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); } /* --- v2.1 微調整：ナビ折り返し防止／トップ要約要素 --- */ .nav__list .menu-item > a { white-space: nowrap; } .flow__title--summary { margin-bottom: 0; } .access-teaser__note { font-size: .85rem; color: var(--c-brown-3); margin: .3rem 0 0; } /* ============================================================ * v2.2 追加：フルワイド画像帯 / 注意事項 / お支払い * ============================================================ */ /* --- フルワイド画像帯（メッセージ） --- */ .imageband { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: clamp(320px, 38vh, 460px); text-align: center; } .imageband__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .imageband__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(247, 244, 239, .58) 0%, rgba(247, 244, 239, .46) 60%, rgba(247, 244, 239, .58) 100%); } .imageband__inner { margin-inline: auto; padding-block: clamp(3rem, 2rem + 4vw, 5rem); max-width: 820px; } .imageband__title { font-family: var(--font-jp); font-size: clamp(1.4rem, 1.05rem + 2vw, 2.3rem); letter-spacing: .14em; color: var(--c-brown); line-height: 1.95; margin: .4rem 0 0; text-wrap: balance; word-break: auto-phrase; } .imageband__lead { color: var(--c-brown-2); letter-spacing: .12em; margin-top: 1rem; } .quote-band--image .quote-band__text { margin: 0; } .quote-band--image .section__more { margin-top: 1.6rem; } /* --- 注意事項（禁忌） --- */ .cautions { background: var(--c-card); border: 1px solid var(--c-line); border-left: 3px solid var(--c-gold); border-radius: var(--radius); padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); } .cautions__intro { margin: 0 0 1.2rem; color: var(--c-brown-2); } .cautions__list { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .7rem; } @media (min-width: 600px) { .cautions__list { grid-template-columns: 1fr 1fr; } } .cautions__item { display: flex; align-items: flex-start; gap: .7rem; color: var(--c-brown); font-size: .96rem; } .cautions__icon { color: var(--c-gold-2); width: 1.15em; height: 1.15em; margin-top: .18em; flex: none; } .cautions__note { font-size: .8rem; color: var(--c-brown-3); margin: 0; } /* --- お支払い --- */ .payment__intro { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--c-brown-2); margin: 0 0 1.4rem; text-align: center; } .payment__icon { color: var(--c-gold-2); width: 1.2em; height: 1.2em; flex: none; } /* ============================================================ * v2.4 上品さ・奥行き・華のあしらい * ============================================================ */ /* 見出し上のプルメリア装飾 */ .section__head::before { content: ""; display: block; width: 30px; height: 30px; margin: 0 auto 1rem; background: url(../images/ornament-plumeria.svg) center / contain no-repeat; opacity: .85; } /* alt セクションの隅にボタニカル装飾（奥行き＋華） */ .section { position: relative; } .section--alt { background-color: var(--c-paper); background-image: url(../images/accent-botanical.svg); background-repeat: no-repeat; background-position: right -26px top -22px; background-size: 200px; } @media (max-width: 600px) { .section--alt { background-size: 132px; background-position: right -18px top -14px; } } /* 主要画像に“オフセットのゴールド額装”で奥行き */ .feature-split__media, .menu-detail__media { position: relative; overflow: visible; } .feature-split__media > img, .feature-split__media .ph-img, .menu-detail__media > img, .menu-detail__media .ph-img { position: relative; z-index: 1; } .feature-split__media::before, .menu-detail__media::before { content: ""; position: absolute; top: 16px; left: 16px; right: -16px; bottom: -16px; border: 1px solid var(--c-gold-line); border-radius: var(--radius); z-index: 0; } .feature-split--reverse .feature-split__media::before { right: 16px; left: -16px; } /* カードに深みのある影＋ホバーの浮き */ .menu-card, .feature, .pillar, .concerns__item, .voice-card, .cautions { box-shadow: 0 16px 36px -24px rgba(74, 63, 53, .45); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .menu-card:hover, .feature:hover, .pillar:hover { transform: translateY(-5px); box-shadow: 0 26px 48px -24px rgba(74, 63, 53, .5); } /* ヒーロー：文字の可読性とリッチ感（中央にやわらかな光だまり） */ .hero__scrim { background: radial-gradient(120% 80% at 50% 42%, rgba(247, 244, 239, .42) 0%, rgba(247, 244, 239, .12) 55%, transparent 100%), linear-gradient(180deg, rgba(247, 244, 239, .30), rgba(247, 244, 239, .18)); } /* 画像帯：スクリムを少し濃く＋ほのかな枠で上品に */ .imageband__scrim { background: linear-gradient(180deg, rgba(247, 244, 239, .50) 0%, rgba(247, 244, 239, .38) 50%, rgba(247, 244, 239, .50) 100%); } .imageband__inner { position: relative; } .imageband__inner::before, .imageband__inner::after { content: ""; display: block; width: 46px; height: 1px; background: var(--c-gold-line); margin: 0 auto; } .imageband__inner::before { margin-bottom: 1.4rem; } .imageband__inner::after { margin-top: 1.4rem; } /* ============================================================ * v2.5 2025–26トレンド演出（上品な範囲で） * フロスト追従ヘッダー / 進行バー / 視差 / 画像ホバー / * ヒーロー入場 / View Transitions / 段階表示 / マイクロ演出 * ============================================================ */ /* スムーススクロール & ページ遷移（View Transitions） */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } html { scroll-padding-top: 96px; } @view-transition { navigation: auto; } /* フロストグラス追従ヘッダー（スクロールで濃く＋影） */ .site-header { background: rgba(247, 244, 239, .68); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); view-transition-name: site-header; } .site-header.is-scrolled { background: rgba(247, 244, 239, .90); box-shadow: 0 12px 30px -22px rgba(74, 63, 53, .55); border-bottom-color: transparent; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--c-ivory); } } /* スクロール進行バー（先頭の細いゴールド） */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1100; background: linear-gradient(90deg, var(--c-gold), var(--c-gold-2)); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; transition: transform .08s linear; pointer-events: none; } /* ヒーロー：視差用 */ .hero__img { will-change: transform; } /* ヒーロー：入場アニメーション（順に立ち上がる） */ @media (prefers-reduced-motion: no-preference) { .hero__eyebrow, .hero__script, .hero__title, .hero__lead, .hero__cta { opacity: 0; animation: makanaHeroRise 1s var(--ease) forwards; } .hero__eyebrow { animation-delay: .15s; } .hero__script { animation-delay: .30s; } .hero__title { animation-delay: .48s; } .hero__lead { animation-delay: .64s; } .hero__cta { animation-delay: .80s; } } @keyframes makanaHeroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* 画像のホバー演出（クローズアップ） */ .menu-card__media, .gallery__item, .ig-tile { overflow: hidden; } .menu-card__media img, .gallery__item img, .ig-tile img { transition: transform .7s var(--ease); } .menu-card:hover .menu-card__media img, .gallery__item:hover img, .ig-tile:hover img { transform: scale(1.06); } /* グリッド要素の段階表示（reveal後に順にフェード） */ @media (prefers-reduced-motion: no-preference) { .js .reveal.is-visible .menu-grid > *, .js .reveal.is-visible .feature-grid > *, .js .reveal.is-visible .pillars > *, .js .reveal.is-visible .ig-grid > * { animation: makanaFadeIn .7s var(--ease) both; } .js .reveal.is-visible .menu-grid > *:nth-child(2), .js .reveal.is-visible .feature-grid > *:nth-child(2), .js .reveal.is-visible .pillars > *:nth-child(2), .js .reveal.is-visible .ig-grid > *:nth-child(2) { animation-delay: .09s; } .js .reveal.is-visible .menu-grid > *:nth-child(3), .js .reveal.is-visible .feature-grid > *:nth-child(3), .js .reveal.is-visible .pillars > *:nth-child(3), .js .reveal.is-visible .ig-grid > *:nth-child(3) { animation-delay: .18s; } .js .reveal.is-visible .menu-grid > *:nth-child(4), .js .reveal.is-visible .feature-grid > *:nth-child(4), .js .reveal.is-visible .ig-grid > *:nth-child(4) { animation-delay: .27s; } .js .reveal.is-visible .ig-grid > *:nth-child(5) { animation-delay: .36s; } .js .reveal.is-visible .ig-grid > *:nth-child(6) { animation-delay: .45s; } } @keyframes makanaFadeIn { from { opacity: 0; } to { opacity: 1; } } /* スクロール量に応じた“映え”：画像帯はうっすら拡大基準 */ .imageband__img { will-change: transform; transition: transform 1.2s var(--ease); } .imageband:hover .imageband__img { transform: scale(1.04); } /* 文中リンクのアニメーション下線（控えめ） */ .entry-content a:not(.btn) { background-image: linear-gradient(var(--c-gold-2), var(--c-gold-2)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .35s var(--ease); padding-bottom: 1px; } .entry-content a:not(.btn):hover { background-size: 100% 1px; } /* ============================================================ * v2.6 日本語の改行・見切れ対策 * 文節区切り(auto-phrase)＋禁則(line-break strict)＋孤立回避 * ============================================================ */ body { line-break: strict; } /* 見出し系：文節で折り返し、行のバランスを取る（孤立文字を防ぐ） */ h1, h2, h3, h4, .hero__title, .hero__lead, .imageband__title, .quote-band__text, .section__title, .page-hero__title, .page-hero__lead, .feature__title, .pillar__title, .menu-card__title, .menu-detail__title, .flow__title, .faq-item__q, .concerns__item, .cautions__intro, .feature-split__body h2, .section__head .eyebrow { word-break: auto-phrase; text-wrap: balance; } /* 本文系：文節で折り返し、最終行の孤立（「す。」等）を回避 */ p, li, dd, dt, figcaption, .concept__body, .section__desc, .menu-card__desc, .feature__desc, .pillar__body, .flow__desc, .faq-item__a { word-break: auto-phrase; text-wrap: pretty; } /* ボタン：ラベルは文節で折り返し、単独文字の孤立を防ぐ */ .btn { flex-wrap: wrap; } .btn__label { text-wrap: balance; word-break: auto-phrase; } /* 固定CTA（スマホ）：詰めても収まるよう微調整 */ .mobile-cta__btn { font-size: .82rem; padding: .82em .35em; line-height: 1.3; } .mobile-cta .btn__badge { font-size: .56rem; padding: .12em .5em; margin-left: 0; } .mobile-cta__btn .btn__icon { width: 1.05em; height: 1.05em; } /* ============================================================ * v2.7 ヒーロー・スライダー（クロスフェード＋ケンバーンズ＋ドット） * ============================================================ */ .hero__slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease); } .hero__slide.is-active { opacity: 1; } .hero__slide .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; will-change: transform; } /* アクティブなスライドだけゆっくりズーム */ @media (prefers-reduced-motion: no-preference) { .hero__slide.is-active .hero__img { animation: heroKenBurns 9s var(--ease) forwards; } } @keyframes heroKenBurns { from { transform: scale(1.05); } to { transform: scale(1.13); } } /* インジケーター（ドット） */ .hero__dots { display: flex; gap: .55rem; justify-content: center; margin-top: 2rem; } .hero__dot { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: 1px solid var(--c-gold-2); background: transparent; cursor: pointer; transition: width .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease); } .hero__dot.is-active { width: 24px; background: var(--c-gold); border-color: var(--c-gold); } .hero__dot:focus-visible { outline: 2px solid var(--c-gold-2); outline-offset: 3px; } /* reduced-motion 時は切り替えも即時に */ @media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } } /* ============================================================ * v2.8 トップのメニューは軽い価格一覧（重複解消） * ============================================================ */ .menu-list { max-width: 600px; margin-inline: auto; } .menu-list__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem; padding: 1.15rem .2rem; border-bottom: 1px solid var(--c-line); } .menu-list__row:first-child { border-top: 1px solid var(--c-line); } .menu-list__name { font-family: var(--font-en); font-size: 1.18rem; letter-spacing: .08em; color: var(--c-brown); } .menu-list__meta { display: inline-flex; align-items: baseline; gap: 1.1rem; white-space: nowrap; } .menu-list__time { font-size: .82rem; color: var(--c-brown-3); } .menu-list__price { font-family: var(--font-en); font-size: 1rem; letter-spacing: .03em; color: var(--c-brown); } @media (max-width: 480px) { .menu-list__row { flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1rem .1rem; } } /* ============================================================ * v2.9 ファーストビュー刷新：可読性最優先 * 文字を明色化し、写真を中央中心に上品に暗くして * 明暗どの背景写真でも必ず読めるコントラストにする。 * ============================================================ */ /* スクリム：中央（文字位置）を強めに、周縁はやや弱く暗くする */ .hero__scrim { background: radial-gradient(120% 82% at 50% 46%, rgba(32, 26, 20, .52) 0%, rgba(32, 26, 20, .26) 60%, rgba(32, 26, 20, .36) 100%), linear-gradient(180deg, rgba(32, 26, 20, .28) 0%, rgba(32, 26, 20, .12) 34%, rgba(32, 26, 20, .46) 100%); } /* テキスト：明色＋淡い影（明るい写真でも輪郭を確保） */ .hero__eyebrow { color: #E7D6B6; opacity: .95; } .hero__script { color: var(--c-ivory); text-shadow: 0 2px 34px rgba(28, 22, 17, .45), 0 1px 4px rgba(28, 22, 17, .28); } .hero__title { color: var(--c-ivory); text-shadow: 0 1px 26px rgba(28, 22, 17, .52), 0 1px 3px rgba(28, 22, 17, .32); } .hero__lead { color: rgba(247, 244, 239, .92); text-shadow: 0 1px 20px rgba(28, 22, 17, .48); } /* ボタン：明色基調で可読性確保（CTAバンドと同じ考え方／ヒーロー内のみ） */ .hero .btn--primary, .hero .btn--primary.is-pending { background: rgba(247, 244, 239, .15); border: 1px solid rgba(247, 244, 239, .55); color: var(--c-ivory); opacity: 1; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .hero .btn--ghost, .hero .btn--ghost.is-pending { background: transparent; border: 1px solid rgba(247, 244, 239, .60); color: var(--c-ivory); opacity: 1; } .hero .btn__icon { color: var(--c-ivory); } .hero .btn__badge { background: var(--c-gold); color: #2A211B; border-color: transparent; } /* スクロール指示も明色側へ */ .hero__scroll { background: rgba(247, 244, 239, .5); } .hero__scroll::after { background: var(--c-ivory); } /* ============================================================ * v2.9.3 3つの強み＝円（サークル）型（コンセプトページ） * ============================================================ */ .strengths { display: grid; gap: 2.6rem 1.6rem; justify-items: center; } @media (min-width: 760px) { .strengths { grid-template-columns: repeat(3, 1fr); align-items: start; } } .strength { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 340px; } .strength__circle { width: min(74vw, 236px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 1.7rem; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #FCF9F4 0%, #ECE2D4 100%); border: 1px solid var(--c-gold-line); box-shadow: 0 20px 44px -30px rgba(74, 63, 53, .5); margin-bottom: 1.4rem; } .strength__title { font-family: var(--font-jp); font-size: clamp(.9rem, .84rem + .3vw, 1.02rem); line-height: 1.75; letter-spacing: .05em; font-weight: 600; color: var(--c-brown); margin: 0; text-wrap: balance; } .strength__desc { font-size: .9rem; line-height: 1.95; color: var(--c-brown-2); margin: 0; } /* ============================================================ * v2.9.4 ファーストビュー内の「3つの強み」円バッジ * 写真の上でも読めるよう、淡いクリーム円＋ブラウン文字。 * ============================================================ */ .hero__badges { list-style: none; display: flex; justify-content: center; align-items: flex-start; gap: clamp(.5rem, .2rem + 1.1vw, 1.15rem); margin: 2.1rem 0 0; padding: 0; } .hero__badge { width: clamp(96px, 20vw, 150px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: .5rem; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(252, 249, 244, .94) 0%, rgba(233, 222, 206, .90) 100%); border: 1px solid rgba(198, 167, 123, .55); box-shadow: 0 16px 34px -20px rgba(24, 18, 13, .75); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .hero__badge-text { font-family: var(--font-jp); font-size: clamp(.6rem, .5rem + .34vw, .78rem); line-height: 1.6; letter-spacing: .01em; font-weight: 600; color: var(--c-brown); text-wrap: balance; word-break: auto-phrase; } /* スマホ：ファーストビューが縦に伸びすぎないよう余白を締める */ @media (max-width: 600px) { .hero__inner { padding-block: 3.2rem; } .hero__lead { margin-bottom: 1.5rem; } .hero__badges { margin-top: 1.5rem; gap: .5rem; } .hero__badge { width: clamp(96px, 28vw, 118px); padding: .3rem; } .hero__badge-text { font-size: .63rem; line-height: 1.55; } .hero__dots { margin-top: 1.3rem; } } /* ============================================================ * v2.9.5 円バッジのはみ出し対策 * 欧文（INDIBA×TROIAREUKE）は自動改行できず円からはみ出すため、 * データ側の改行をそのまま反映し、幅も円の内側に収める。 * ============================================================ */ .hero__badges { gap: clamp(.4rem, .2rem + .7vw, 1rem); } .hero__badge { width: auto; flex: 1 1 0; /* 画面幅に応じて3つが自動で収まる */ max-width: 158px; min-width: 0; padding: .4rem; } .hero__badge-text { white-space: pre-line; /* site-data.php の改行を反映 */ max-width: 84%; /* 円の内側に収める */ min-width: 0; overflow-wrap: anywhere; /* 想定外に長い語でも円外に出さない */ } @media (max-width: 600px) { .hero__badge { padding: .3rem; } .hero__badge-text { font-size: .62rem; } } /* コンセプトページの円も同じ改行ラベルを反映 */ .strength__title { white-space: pre-line; } /* ============================================================ * v2.10 トップのメニュー＝3つのアプローチ（料金はメニューページ） * ============================================================ */ .approach-grid { display: grid; gap: 2.6rem 2rem; max-width: 1000px; margin-inline: auto; } @media (min-width: 820px) { .approach-grid { grid-template-columns: repeat(3, 1fr); } } .approach { text-align: center; padding-top: 1.6rem; border-top: 1px solid var(--c-gold-line); } .approach__no { font-family: var(--font-en); font-size: .84rem; letter-spacing: .24em; color: var(--c-gold-2); margin: 0 0 .55rem; } .approach__name { font-family: var(--font-en); font-size: clamp(1.16rem, 1.02rem + .5vw, 1.42rem); letter-spacing: .09em; color: var(--c-brown); margin: 0 0 .8rem; line-height: 1.3; } .approach__catch { font-size: clamp(.92rem, .88rem + .18vw, 1rem); font-weight: 600; line-height: 1.75; color: var(--c-brown); margin: 0 0 .7rem; text-wrap: balance; } .approach__body { font-size: .88rem; line-height: 2; color: var(--c-brown-2); margin: 0; text-wrap: pretty; } /* ============================================================ * v2.10.1 3つのアプローチ：カード化＋ゴールドの番号バッジ * 既存のカード表現（--c-card / 細罫 / ホバー浮上）に合わせる。 * ============================================================ */ .approach-grid { gap: 2.4rem 1.6rem; align-items: stretch; } .approach { position: relative; padding: 3rem 1.7rem 2.1rem; background: var(--c-card); border: 1px solid var(--c-gold-line); border-top: 1px solid var(--c-gold-line); border-radius: var(--radius); box-shadow: var(--shadow-soft); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .approach:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } /* 番号：カード上辺に重なるゴールドの円バッジ */ .approach__no { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-card); border: 1px solid var(--c-gold-line); font-family: var(--font-en); font-size: .8rem; letter-spacing: .04em; color: var(--c-gold-2); margin: 0; } /* 名称の下に、中央が光るゴールドの細線 */ .approach__name { margin: 0; } .approach__name::after { content: ""; display: block; width: 46px; height: 1px; margin: 1rem auto; background: linear-gradient(90deg, transparent, var(--c-gold), transparent); } /* 03＝特別ケア：ゴールド寄りの階調で差をつける */ .approach--accent { background: linear-gradient(180deg, #FCF8F1 0%, #F4EBDC 100%); border-color: var(--c-gold); } .approach--accent .approach__no { background: #FCF8F1; border-color: var(--c-gold); } @media (prefers-reduced-motion: reduce) { .approach { transition: none; } .approach:hover { transform: none; } } /* ============================================================ * v2.11 メーカーロゴをカード内に（A案） * ★ロゴは商標。改変・色変更はしない（原寸比・原色のまま表示）。 * INDIBAはタグライン込みで縦長（本体は全体の56%）、TROIAREUKEは * ロゴタイプのみ。そのままだと文字の大きさが揃わないため、 * TROIAREUKE を 1.2 倍にして光学的にサイズを合わせる。 * ============================================================ */ .approach__name { --logo-w: clamp(98px, 9.4vw, 126px); } .approach__name--pair { --logo-w: clamp(70px, 6.6vw, 88px); } .approach__logos { display: flex; align-items: center; justify-content: center; gap: .6rem; /* INDIBAの高さ（幅×1/3.17）を基準に、カード間で行の高さを揃える */ min-height: calc(var(--logo-w) * .315); } .approach__logo { display: block; height: auto; width: var(--logo-w); } .approach__logo--troiareuke { width: calc(var(--logo-w) * 1.2); } .approach__x { font-family: var(--font-en); font-size: .95rem; color: var(--c-brown-3); line-height: 1; } /* ============================================================ * v2.12 ファーストビューのバッジ＝エンブレム画像 * 画像側に金縁・装飾が入っているため、CSSの円（背景・枠・ぼかし）は無効化。 * 影だけCSSで足して写真の上で立体的に見せる。 * ============================================================ */ .hero__badge--img { background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; aspect-ratio: auto; max-width: 172px; } .hero__badge-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 20px rgba(24, 18, 13, .55)); } @media (max-width: 600px) { .hero__badge--img { padding: 0; } } /* ============================================================ * v2.13 ファーストビューのブランド表記＝公式ロゴ画像 * ロゴに「INDIBA SALON」が含まれるため eyebrow は削除済み。 * 暗いヒーロー用に明色版（logo-light）を使用。 * ============================================================ */ .hero__script { font-size: 0; /* 文字が無くなるため、余白由来の高さを消す */ text-shadow: none; margin: 0 0 .95rem; } .hero__logo { display: block; margin-inline: auto; width: min(68vw, 272px); height: auto; filter: drop-shadow(0 6px 26px rgba(24, 18, 13, .5)); } /* ============================================================ * v2.14 ヘッダー＝公式ロゴ画像 * ロゴは縦積み構成（「INDIBA SALON」は全高の5%）のため、 * 従来の44pxでは潰れる。上部では大きく見せ、スクロールで縮小する。 * ============================================================ */ :root { --header-h: 124px; } .site-header { --logo-h: 100px; } .site-header.is-scrolled { --header-h: 88px; --logo-h: 64px; } @media (max-width: 900px) { :root { --header-h: 112px; } .site-header { --logo-h: 88px; } .site-header.is-scrolled { --header-h: 84px; --logo-h: 60px; } } .site-header__inner { transition: min-height .4s var(--ease); } .brand--header { display: inline-flex; align-items: center; } .brand__logo--header, .custom-logo { width: auto; height: var(--logo-h, 100px); transition: height .4s var(--ease); } @media (prefers-reduced-motion: reduce) { .site-header__inner, .brand__logo--header, .custom-logo { transition: none; } } /* ============================================================ * v2.15 ヘッダー＝公式ロゴタイプ（横顔なし・比率3.36:1） * 横長のため v2.14 の高いヘッダーは不要。通常の高さに戻す。 * ============================================================ */ :root { --header-h: 88px; } .site-header { --logo-h: 60px; } .site-header.is-scrolled { --header-h: 72px; --logo-h: 48px; } @media (max-width: 900px) { :root { --header-h: 84px; } .site-header { --logo-h: 56px; } .site-header.is-scrolled { --header-h: 68px; --logo-h: 46px; } } /* ============================================================ * v2.16 3つの強み＝メダリオン（王冠＋月桂樹＋リボン） * 枠はSVGなので拡大しても劣化せず、文字は本物のテキスト。 * サイズはすべて --disc（メダル直径）からの比例計算＝ * スマホでもPCでも比率が崩れない。 * ============================================================ */ .section--strength { background: radial-gradient(72% 58% at 50% 38%, rgba(232, 202, 145, .40) 0%, rgba(232, 202, 145, 0) 72%), linear-gradient(180deg, #FCF9F3 0%, #F4EADA 55%, #EFE3CF 100%); overflow: hidden; } .section__title--strength { font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.5rem); letter-spacing: .05em; color: #3F3225; } .section--strength .section__desc { color: var(--c-brown-2); letter-spacing: .06em; } /* --- 並び：スマホは縦積み（読みやすさ優先） --- */ .medals { display: flex; flex-direction: column; align-items: center; gap: clamp(2.2rem, 1.2rem + 4vw, 3rem); } .medal { --disc: min(72vw, 272px); display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 360px; } /* --- メダル本体 --- */ .medal__disc { position: relative; width: var(--disc); aspect-ratio: 240 / 256; } .medal__frame { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 24px rgba(122, 96, 54, .32)); } .medal__text { position: absolute; left: 50%; top: 57.03%; /* 円の中心（cy146 / 高さ256） */ transform: translate(-50%, -50%); width: 60%; } .medal__main { white-space: pre-line; font-family: var(--font-jp); font-weight: 600; font-size: max(15px, calc(var(--disc) * .066)); line-height: 1.45; letter-spacing: .02em; color: #4A3A24; margin: 0; } .medal__div { display: block; position: relative; width: 68%; height: 1px; margin: calc(var(--disc) * .038) auto; background: linear-gradient(90deg, transparent, var(--c-gold-2), transparent); } .medal__div::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--disc) * .022); height: calc(var(--disc) * .022); background: var(--c-gold-2); transform: translate(-50%, -50%) rotate(45deg); } .medal__sub { font-family: var(--font-jp); font-weight: 600; font-size: max(14px, calc(var(--disc) * .062)); line-height: 1.4; letter-spacing: .04em; color: #3A2D1C; margin: 0; } /* --- リボン（メダル下端に少し重ねる） --- */ .medal__ribbon { --notch: calc(var(--disc) * .05); position: relative; z-index: 2; margin: calc(var(--disc) * -.09) 0 0; max-width: 100%; background: linear-gradient(180deg, #F3E0B9, #B8944F); padding: 1.5px; clip-path: polygon(0 0, 100% 0, calc(100% - var(--notch)) 50%, 100% 100%, 0 100%, var(--notch) 50%); } .medal__ribbon > span { display: block; background: linear-gradient(180deg, #5A4835 0%, #3B2F22 100%); color: #F0E2C4; font-size: max(10px, calc(var(--disc) * .040)); line-height: 1.55; letter-spacing: .05em; padding: .5em calc(var(--notch) + .9em); clip-path: polygon(0 0, 100% 0, calc(100% - var(--notch)) 50%, 100% 100%, 0 100%, var(--notch) 50%); } /* --- 説明文（コンセプトページのみ） --- */ .medal__body { font-size: .9rem; line-height: 1.95; color: var(--c-brown-2); margin: 1.1rem 0 0; max-width: 340px; } /* --- PC：3つ横並び。中央（最高峰）を大きく・少し持ち上げる --- */ @media (min-width: 860px) { .medals { flex-direction: row; align-items: flex-start; justify-content: center; gap: clamp(1rem, -1.6rem + 4vw, 2.6rem); } .medal { --disc: min(23vw, 286px); max-width: 300px; } .medal--feature { --disc: min(29vw, 356px); max-width: 372px; margin-top: -2.2rem; order: 2; } .medal:nth-child(2) { order: 1; } .medal:nth-child(3) { order: 3; } } /* ============================================================ * v5.0 Makana Editorial Luxury Hero * 競合の高級ホテルスパ／専門サロンを踏まえ、写真を隠す大判カードを廃止。 * 3スライドを「ブランド」「INDIBAの温もり」「プライベート空間」に分け、 * レイアウト・明暗・装飾まで切り替えて、各スライドの役割を明確化する。 * 既存JSの .hero__slide / .is-active / .hero__dots 契約は維持。 * ============================================================ */ :root { --hero-brown: #4A3F35; --hero-brown-deep: #352B24; --hero-brown-soft: #6E6053; --hero-gold: #C6A77B; --hero-gold-deep: #A98556; --hero-ivory: #F7F4EF; --hero-ivory-light: #FCFAF6; --hero-beige: #DCCFBF; --hero-beige-light: #EAE1D5; } .hero--editorial { position: relative; isolation: isolate; display: block; min-height: min(850px, max(720px, calc(100svh - var(--header-h)))); overflow: hidden; text-align: left; background: var(--hero-beige-light); color: var(--hero-brown); } .hero--editorial .hero__slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero--editorial .hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; transition: opacity 1.45s var(--ease), visibility 1.45s; } .hero--editorial .hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .hero--editorial .hero__slide picture, .hero--editorial .hero__slide .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; } .hero--editorial .hero__slide picture { display: block; } .hero--editorial .hero__slide .hero__img { z-index: 0; object-fit: cover; object-position: var(--hero-position, 50% 50%); transform: scale(1.012); will-change: transform; } .hero__slide--brand .hero__img { filter: sepia(.07) saturate(.72) contrast(.95) brightness(1.06); } .hero__slide--warmth .hero__img { filter: sepia(.09) saturate(.88) contrast(1.04) brightness(.84); } .hero__slide--salon .hero__img { filter: sepia(.08) saturate(.70) contrast(.96) brightness(.96); } .hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero__slide--brand .hero__veil { background: radial-gradient(ellipse 48% 72% at 50% 43%, rgba(252,250,246,.94) 0%, rgba(247,244,239,.72) 46%, rgba(247,244,239,.18) 76%, transparent 100%), linear-gradient(90deg, rgba(74,63,53,.24), rgba(220,207,191,.08) 28%, rgba(220,207,191,.08) 72%, rgba(74,63,53,.24)); } .hero__slide--warmth .hero__veil { background: linear-gradient(90deg, rgba(53,43,36,.92) 0%, rgba(53,43,36,.80) 31%, rgba(53,43,36,.28) 58%, rgba(53,43,36,.05) 78%), linear-gradient(180deg, rgba(53,43,36,.08), rgba(53,43,36,.24)); } .hero__slide--salon .hero__veil { background: linear-gradient(90deg, rgba(74,63,53,.12) 0%, rgba(247,244,239,.05) 46%, rgba(247,244,239,.72) 72%, rgba(247,244,239,.94) 100%), linear-gradient(180deg, rgba(247,244,239,.06), rgba(74,63,53,.12)); } .hero-scene { position: absolute; inset: 0; z-index: 2; display: flex; padding: clamp(4rem, 7vw, 7rem) clamp(24px, 7vw, 8rem) clamp(12.5rem, 20vh, 15.5rem); } .hero-scene__content { position: relative; z-index: 2; width: min(100%, 540px); opacity: 0; transform: translateY(18px); transition: opacity .85s var(--ease) .18s, transform .85s var(--ease) .18s; } .hero__slide.is-active .hero-scene__content { opacity: 1; transform: none; } .hero-scene--brand { align-items: center; justify-content: center; text-align: center; } .hero-scene__content--brand { width: min(100%, 690px); padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.8rem); } .hero-scene__content--brand::before, .hero-scene__content--brand::after { content: ""; position: absolute; left: 50%; width: min(86%, 540px); height: 1px; background: linear-gradient(90deg, transparent, rgba(198,167,123,.65), transparent); transform: translateX(-50%); } .hero-scene__content--brand::before { top: 0; } .hero-scene__content--brand::after { bottom: 0; } .hero-scene--warmth { align-items: center; justify-content: flex-start; color: var(--hero-ivory); } .hero-scene__content--warmth { padding: clamp(2rem, 3.4vw, 3rem) clamp(1.6rem, 3vw, 2.7rem); background: linear-gradient(145deg, rgba(53,43,36,.78), rgba(53,43,36,.54)); border-left: 1px solid rgba(198,167,123,.82); box-shadow: 0 30px 70px -52px rgba(0,0,0,.86); backdrop-filter: blur(5px); } .hero-scene--salon { align-items: flex-end; justify-content: flex-end; text-align: left; } .hero-scene__content--salon { width: min(100%, 500px); padding: clamp(2rem, 3.4vw, 3rem) clamp(1.6rem, 3vw, 2.8rem); background: linear-gradient(145deg, rgba(252,250,246,.94), rgba(247,244,239,.82)); border: 1px solid rgba(198,167,123,.48); box-shadow: 0 34px 76px -52px rgba(74,63,53,.72); backdrop-filter: blur(7px); } .hero-scene__content--salon::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(198,167,123,.18); pointer-events: none; } .hero-scene__kicker, .hero-scene__chapter, .hero-scene__eyebrow, .hero-scene__signature { font-family: var(--font-en); text-transform: uppercase; } .hero-scene__kicker { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 0 1rem; font-size: clamp(.66rem, .61rem + .18vw, .76rem); font-weight: 500; line-height: 1.4; letter-spacing: .31em; color: var(--hero-gold-deep); } .hero-scene__kicker::before, .hero-scene__kicker::after { content: ""; width: clamp(24px, 4vw, 48px); height: 1px; background: linear-gradient(90deg, transparent, rgba(169,133,86,.70)); } .hero-scene__kicker::after { transform: scaleX(-1); } .hero-scene__logo-wrap { display: flex; justify-content: center; margin-bottom: .6rem; } .hero-scene__logo { width: clamp(290px, 26vw, 430px); height: auto; filter: drop-shadow(0 10px 24px rgba(74,63,53,.05)); } .hero-scene__chapter { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.15rem; font-size: .73rem; line-height: 1; letter-spacing: .24em; color: var(--hero-gold); } .hero-scene__chapter span { font-size: 1.08rem; letter-spacing: .08em; } .hero-scene__eyebrow { margin: 0 0 .75rem; font-size: .78rem; line-height: 1; letter-spacing: .34em; color: var(--hero-gold); } .hero-scene__title { display: grid; gap: .08em; margin: 0 0 1rem; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); font-weight: 500; line-height: 1.55; letter-spacing: .075em; text-wrap: balance; } .hero-scene__title--brand { display: block; margin-bottom: .55rem; font-size: clamp(1.42rem, 1rem + 1.35vw, 2.1rem); line-height: 1.75; letter-spacing: .105em; color: var(--hero-brown); } .hero-scene__lead { margin: 0; font-size: clamp(.94rem, .87rem + .25vw, 1.05rem); line-height: 2; letter-spacing: .06em; color: rgba(247,244,239,.84); } .hero-scene__lead--brand { color: var(--hero-brown-soft); letter-spacing: .12em; } .hero-scene__content--salon .hero-scene__chapter, .hero-scene__content--salon .hero-scene__eyebrow { color: var(--hero-gold-deep); } .hero-scene__content--salon .hero-scene__title { color: var(--hero-brown); } .hero-scene__content--salon .hero-scene__lead { color: var(--hero-brown-soft); } .hero-scene__signature { margin: 1.35rem 0 0; padding-top: .9rem; border-top: 1px solid rgba(198,167,123,.38); font-size: .68rem; line-height: 1; letter-spacing: .24em; color: var(--hero-gold); } .hero-scene__content--salon .hero-scene__signature { color: var(--hero-gold-deep); } .hero-scene__heat { position: absolute; left: clamp(32%, 46vw, 58%); top: 50%; width: clamp(300px, 32vw, 560px); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .24; } .hero-scene__heat i { position: absolute; inset: calc(var(--ring, 0) * 11%); border: 1px solid rgba(198,167,123,.72); border-radius: 50%; } .hero-scene__heat i:nth-child(1) { --ring: 0; } .hero-scene__heat i:nth-child(2) { --ring: 1; } .hero-scene__heat i:nth-child(3) { --ring: 2; } .hero-scene__flower { position: absolute; right: clamp(16px, 5vw, 86px); top: clamp(58px, 10vh, 112px); width: clamp(86px, 9vw, 150px); color: var(--hero-gold-deep); opacity: .11; } .hero-scene__flower .icon { width: 100%; height: 100%; } /* 予約導線はどのスライドでも同じ位置に固定し、目的を見失わせない */ .hero__fixed { position: absolute; left: 50%; bottom: clamp(116px, 14vh, 145px); z-index: 6; width: min(calc(100% - 44px), 620px); transform: translateX(-50%); } .hero--editorial .hero__cta { display: flex; justify-content: center; gap: .75rem; } .hero--editorial .hero__cta .btn { min-width: 220px; padding: .94em 1.7em; border-radius: 4px; box-shadow: 0 15px 32px -25px rgba(53,43,36,.78); } .btn--hero-primary, .btn--hero-primary.is-pending { background: var(--hero-brown); border-color: var(--hero-brown); color: var(--hero-ivory); } .btn--hero-primary:hover { background: #5A4C40; border-color: #5A4C40; color: var(--hero-ivory); } .btn--hero-ghost, .btn--hero-ghost.is-pending { background: rgba(252,250,246,.86); border-color: rgba(74,63,53,.38); color: var(--hero-brown); backdrop-filter: blur(7px); } .btn--hero-ghost:hover { background: var(--hero-brown); border-color: var(--hero-brown); color: var(--hero-ivory); } .hero--editorial .hero__cta .btn__icon { color: currentColor; } .hero--editorial .hero__cta .btn__badge { background: var(--hero-gold); color: #fff; } /* ドットを章ナビへ変更し、クリック前から各スライドの違いを伝える */ .hero--editorial .hero__dots { position: absolute; left: 50%; bottom: clamp(72px, 8.4vh, 88px); z-index: 7; display: flex; justify-content: center; gap: .35rem; margin: 0; transform: translateX(-50%); } .hero--editorial .hero__dot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 112px; height: 30px; padding: 0 .55rem; border: 0; border-radius: 0; background: transparent; color: rgba(74,63,53,.60); font-family: var(--font-en); font-size: .64rem; line-height: 1; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: color .35s var(--ease), background .35s var(--ease); } .hero--editorial .hero__dot::before { content: ""; position: absolute; left: .55rem; right: .55rem; bottom: 1px; height: 1px; background: rgba(74,63,53,.24); transition: background .35s var(--ease), height .35s var(--ease); } .hero--editorial .hero__dot:nth-child(1)::after { content: "01 Gift"; } .hero--editorial .hero__dot:nth-child(2)::after { content: "02 Warmth"; } .hero--editorial .hero__dot:nth-child(3)::after { content: "03 Salon"; } .hero--editorial .hero__dot.is-active { width: 112px; background: rgba(247,244,239,.58); color: var(--hero-brown); } .hero--editorial .hero__dot.is-active::before { height: 2px; background: var(--hero-gold-deep); } .hero__paper { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 8; height: clamp(62px, 7vw, 94px); pointer-events: none; } .hero__paper svg { display: block; width: 100%; height: 100%; } .hero__paper-back { fill: rgba(220,207,191,.90); } .hero__paper-front { fill: var(--c-ivory); } .brand-promises { position: relative; z-index: 5; padding: clamp(.9rem, 1.6vw, 1.35rem) 0 clamp(1.7rem, 2.4vw, 2.35rem); background: var(--c-ivory); } .brand-promises__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; padding-block: .65rem; border-top: 1px solid rgba(198,167,123,.22); border-bottom: 1px solid rgba(198,167,123,.22); } .brand-promise { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem; min-width: 0; padding: .35rem 1.2rem; text-align: center; } .brand-promise + .brand-promise { border-left: 1px solid var(--c-line); } .brand-promise__en { font-family: var(--font-en); font-size: .72rem; line-height: 1.2; letter-spacing: .27em; text-transform: uppercase; color: var(--hero-gold-deep); } .brand-promise__jp { font-size: clamp(.76rem, .72rem + .12vw, .84rem); line-height: 1.65; letter-spacing: .045em; color: var(--hero-brown-soft); text-wrap: balance; } @media (prefers-reduced-motion: no-preference) { .hero--editorial .hero__slide.is-active .hero__img { animation: heroEditorialZoom 10s ease-out both; } .hero__slide--warmth.is-active .hero-scene__content { animation: heroWarmthEnter .95s var(--ease) .18s both; } .hero__slide--salon.is-active .hero-scene__content { animation: heroSalonEnter .95s var(--ease) .18s both; } .hero__slide--warmth.is-active .hero-scene__heat { animation: heroHeatPulse 5.5s ease-in-out infinite alternate; } } @keyframes heroEditorialZoom { from { transform: scale(1.012); } to { transform: scale(1.052); } } @keyframes heroWarmthEnter { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } } @keyframes heroSalonEnter { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @keyframes heroHeatPulse { from { transform: translate(-50%,-50%) scale(.94); opacity: .16; } to { transform: translate(-50%,-50%) scale(1.04); opacity: .28; } } /* ============================================================ * Top — Owner & Salon moved between Strength and Concerns * ============================================================ */ .section--home-salon { overflow: hidden; background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.68), transparent 34%), linear-gradient(135deg, var(--c-paper), #E9DED0); } .section--home-salon::after { content: ""; position: absolute; right: -90px; top: -100px; width: 330px; height: 330px; border: 1px solid rgba(198,167,123,.13); border-radius: 50%; pointer-events: none; } .home-salon { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(2.5rem, 5vw, 6rem); } .home-salon__visual { position: relative; min-height: clamp(470px, 46vw, 620px); } .home-salon__portrait { position: absolute; left: 0; top: 0; width: min(72%, 430px); margin: 0; } .home-salon__portrait-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; box-shadow: 0 32px 68px -48px rgba(74,63,53,.72); } .home-salon__space { position: absolute; right: 0; bottom: 0; width: min(56%, 330px); margin: 0; padding: 9px; background: var(--c-ivory); box-shadow: 0 30px 62px -45px rgba(74,63,53,.70); } .home-salon__space-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .home-salon__flower { position: absolute; left: 66%; top: 8%; width: 84px; color: var(--c-gold-2); opacity: .23; } .home-salon__flower .icon { width: 100%; height: 100%; } .home-salon__body { max-width: 500px; } .home-salon__lead { font-size: 1rem; line-height: 2.1; color: var(--c-brown-2); } .home-salon__quote { position: relative; margin-top: 1.5rem; padding: 1.2rem 0 1.2rem 1.4rem; border-left: 1px solid var(--c-gold); font-size: .92rem; line-height: 2; color: var(--c-brown-2); } .section--concerns { background: var(--c-ivory); } .section--news { background: var(--c-ivory); } @media (max-width: 900px) { .hero--editorial { min-height: max(740px, calc(100svh - var(--header-h))); } .hero-scene { padding: 4.8rem 24px 12.5rem; } .hero-scene--warmth { align-items: flex-start; } .hero-scene__content--warmth { width: min(78%, 470px); } .hero-scene--salon { align-items: center; } .hero-scene__content--salon { width: min(72%, 470px); } .hero__fixed { bottom: 112px; } .home-salon { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .home-salon__visual { min-height: 470px; } } @media (max-width: 680px) { #home-salon-h{ margin-bottom:15px; } .hero--editorial { min-height: max(760px, calc(100svh - var(--header-h))); } .hero-scene { padding: 3.8rem 16px 12rem; } .hero-scene__content--brand { padding-inline: .4rem; } .hero-scene__kicker { gap: .6rem; font-size: .61rem; letter-spacing: .19em; } .hero-scene__kicker::before, .hero-scene__kicker::after { width: 18px; } .hero-scene__logo { width: clamp(240px, 74vw, 310px); } .hero-scene__title--brand { font-size: clamp(1.28rem, 5vw, 1.58rem); letter-spacing: .065em; } .hero-scene__lead--brand { font-size: .87rem; letter-spacing: .07em; } .hero-scene--warmth { align-items: flex-start; justify-content: flex-start; padding-top: 4.5rem; } .hero-scene__content--warmth { width: min(88%, 430px); padding: 1.7rem 1.25rem 1.8rem; } .hero-scene--salon { align-items: flex-start; justify-content: flex-end; padding-top: 5rem; } .hero-scene__content--salon { width: min(88%, 430px); padding: 1.7rem 1.25rem 1.8rem; } .hero-scene__title { font-size: clamp(1.48rem, 6vw, 2rem); } .hero-scene__lead { font-size: .87rem; line-height: 1.9; } .hero-scene__heat { left: 69%; width: 330px; } .hero-scene__flower { right: -16px; top: 42px; width: 96px; } .hero__fixed { bottom: 91px; width: calc(100% - 30px); } .hero--editorial .hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; } .hero--editorial .hero__cta .btn { min-width: 0; width: 100%; padding: .82em .55em; font-size: .79rem; line-height: 1.35; } .hero--editorial .hero__dots { bottom: 54px; gap: .4rem; } .hero--editorial .hero__dot { width: 32px; height: 24px; padding: 0; font-size: 0; } .hero--editorial .hero__dot::after { display: none; } .hero--editorial .hero__dot::before { left: 4px; right: 4px; bottom: 5px; } .hero--editorial .hero__dot.is-active { width: 48px; background: transparent; } .hero__paper { height: 48px; } .brand-promises__inner { padding-inline: 16px; } .brand-promise { padding-inline: .5rem; } .brand-promise__en { font-size: .61rem; letter-spacing: .16em; } .brand-promise__jp { font-size: .67rem; } .home-salon { grid-template-columns: 1fr; gap: 2.2rem; } .home-salon__visual { min-height: 460px; max-width: 520px; width: 100%; margin-inline: auto; } .home-salon__body { max-width: 560px; margin-inline: auto; } } @media (max-width: 460px) { .hero--editorial { min-height: max(720px, calc(100svh - var(--header-h))); } .hero-scene { padding-top: 3.2rem; } .hero-scene__content--warmth, .hero-scene__content--salon { width: 94%; } .hero-scene__chapter { font-size: .64rem; } .hero-scene__eyebrow { font-size: .68rem; letter-spacing: .24em; } .hero-scene__signature { font-size: .6rem; letter-spacing: .16em; } .hero--editorial .hero__cta .btn__badge { display: none; } .brand-promises__inner { grid-template-columns: 1fr; max-width: 330px; } .brand-promise { padding: .66rem .4rem; } .brand-promise + .brand-promise { border-left: 0; border-top: 1px solid var(--c-line); } .home-salon__visual { min-height: 410px; } .home-salon__portrait { width: 76%; } .home-salon__space { width: 58%; padding: 6px; } .home-salon__flower { left: 70%; width: 65px; } } @media (prefers-reduced-motion: reduce) { .hero--editorial .hero__slide, .hero-scene__content { transition: none !important; } .hero--editorial .hero__slide .hero__img, .hero-scene__heat { animation: none !important; transform: none !important; } } /* ============================================================ * Service pages — INDIBA / TROIAREUKE * 資料画像を生かしつつ、Makanaの静かなブラウン＆ゴールドへ統合 * ============================================================ */ .service-page { --service-ink: var(--c-brown); --service-muted: var(--c-brown-2); --service-accent: var(--c-gold-2); } .service-page--troiareuke { --service-accent: #365d8f; --service-accent-soft: rgba(54, 93, 143, .12); } .service-hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(390px, 52vw, 590px); display: grid; place-items: center; padding: clamp(4rem, 7vw, 7rem) 0; background: radial-gradient(circle at 50% 32%, rgba(255,255,255,.94), rgba(247,244,239,.58) 48%, rgba(241,234,224,.92) 100%); } .service-hero::before, .service-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); pointer-events: none; } .service-hero::before { width: clamp(260px, 40vw, 620px); aspect-ratio: 1; left: -12%; top: -42%; border: 1px solid rgba(198,167,123,.22); box-shadow: inset 0 0 0 42px rgba(198,167,123,.035), inset 0 0 0 84px rgba(198,167,123,.025); } .service-hero::after { width: clamp(220px, 34vw, 520px); aspect-ratio: 1; right: -10%; bottom: -46%; background: radial-gradient(circle, rgba(198,167,123,.12), transparent 68%); } .service-hero__inner { text-align: center; position: relative; z-index: 2; } .service-hero__brand { display: block; width: auto; margin: 0 auto clamp(1.2rem, 2vw, 1.8rem); object-fit: contain; } .service-hero__brand--indiba { height: clamp(64px, 9vw, 100px); } .service-hero__brand--troiareuke { height: clamp(55px, 8vw, 84px); } .service-hero .page-hero__title { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.45rem); } .service-hero .page-hero__lead { max-width: 700px; line-height: 2; } .service-hero__orb { position: absolute; z-index: -1; width: clamp(300px, 55vw, 780px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(217,166,112,.18), rgba(217,166,112,.05) 45%, transparent 70%); } .service-hero--troiareuke { background: linear-gradient(135deg, rgba(250,250,251,.96), rgba(244,246,249,.94)), var(--c-ivory); } .service-hero__color-drops { position: absolute; inset: 0; z-index: -1; opacity: .16; pointer-events: none; } .service-hero__color-drops i { position: absolute; width: clamp(90px, 12vw, 165px); aspect-ratio: 1 / 1.55; border-radius: 55% 45% 62% 38% / 42% 58% 42% 58%; filter: blur(1px); transform: rotate(18deg); } .service-hero__color-drops i:nth-child(1) { left: 5%; top: 12%; background: #8ab553; } .service-hero__color-drops i:nth-child(2) { left: 17%; bottom: -8%; background: #e1bd39; transform: rotate(-22deg); } .service-hero__color-drops i:nth-child(3) { right: 16%; top: -8%; background: #d96367; transform: rotate(34deg); } .service-hero__color-drops i:nth-child(4) { right: 3%; bottom: 2%; background: #4387b7; transform: rotate(-12deg); } .service-split { display: grid; gap: clamp(2rem, 3.5vw, 4.5rem); align-items: center; } .service-split__body p { color: var(--service-muted); } .service-split__body .eyebrow { color: var(--service-accent); } .service-frame { position: relative; padding: clamp(.7rem, 1.2vw, 1rem); background: #fff; box-shadow: 0 28px 70px -44px rgba(74,63,53,.7); } .service-frame::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--c-gold-line); z-index: -1; } .service-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .service-frame--cool::before { border-color: rgba(54,93,143,.28); } .service-diagram { position: relative; max-width: 1040px; } .service-diagram__media { padding: clamp(.8rem, 2vw, 1.5rem); background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow-soft); } .service-diagram__media img { width: 100%; } .service-diagram__caption { position: relative; width: min(92%, 620px); margin: -1.7rem auto 0; padding: 1.25rem clamp(1rem, 2vw, 2rem); background: rgba(74,63,53,.96); color: var(--c-on-dark); text-align: center; box-shadow: 0 18px 36px -24px rgba(74,63,53,.8); } .service-diagram__number { font-family: var(--font-en); font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1; letter-spacing: .04em; color: var(--c-gold); } .service-diagram__unit { margin-left: .25em; font-family: var(--font-en); letter-spacing: .12em; color: var(--c-on-dark-2); } .service-diagram__caption p { margin: .6rem 0 0; color: var(--c-on-dark-2); font-size: .88rem; } .service-card-grid { display: grid; gap: clamp(1.1rem, 2vw, 1.7rem); } .service-card { position: relative; overflow: hidden; padding: clamp(1.6rem, 2.7vw, 2.3rem); background: var(--c-card); border: 1px solid var(--c-line); box-shadow: 0 18px 40px -30px rgba(74,63,53,.5); } .service-card::after { content: ""; position: absolute; right: -44px; bottom: -54px; width: 135px; height: 135px; border: 1px solid rgba(198,167,123,.25); border-radius: 50%; } .service-card__no { position: absolute; top: .8rem; right: 1rem; font-family: var(--font-en); font-size: 2.7rem; color: rgba(198,167,123,.18); line-height: 1; } .service-card__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--c-gold-line); border-radius: 50%; color: var(--c-gold-2); margin-bottom: 1rem; } .service-card__icon .icon { width: 25px; height: 25px; } .service-card__en { margin: 0 0 .3rem; font-family: var(--font-en); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--c-gold-2); } .service-card__title { font-size: 1.18rem; margin-bottom: .7rem; } .service-card__body { color: var(--c-brown-2); font-size: .92rem; line-height: 1.9; } .service-card__points { display: grid; gap: .45rem; padding-top: 1rem; border-top: 1px solid var(--c-line); } .service-card__points li { display: flex; gap: .55rem; align-items: flex-start; font-size: .87rem; color: var(--c-brown-2); } .service-card__check { width: 1em; height: 1em; margin-top: .35em; color: var(--c-gold-2); } .service-recommend__inner { display: grid; gap: 2rem; align-items: center; } .service-check-list { display: grid; gap: .7rem; } .service-check-list li { display: flex; align-items: flex-start; gap: .8rem; padding: .85rem 1rem; background: rgba(255,255,255,.58); border-bottom: 1px solid var(--c-line); } .service-check-list__icon { width: 1.1em; height: 1.1em; margin-top: .35em; color: var(--c-gold-2); } .service-note { display: flex; gap: 1rem; align-items: flex-start; padding: clamp(1.3rem, 2vw, 1.8rem); border: 1px solid var(--c-line); border-left: 3px solid var(--c-gold); background: var(--c-card); } .service-note__icon { color: var(--c-gold-2); flex: none; margin-top: .2rem; } .service-note__icon .icon { width: 1.4rem; height: 1.4rem; } .service-note__title { font-size: 1rem; margin: 0 0 .35rem; } .service-note p { color: var(--c-brown-2); font-size: .88rem; margin: 0; } .philosophy-grid { display: grid; gap: 1.2rem; } .philosophy-card { position: relative; padding: clamp(1.6rem, 2.5vw, 2.2rem); background: var(--c-card); border: 1px solid var(--c-line); box-shadow: 0 18px 38px -30px rgba(50,76,111,.4); } .philosophy-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #7d9d50, #dfbd3a, #cb666d, #487fae); opacity: .75; } .philosophy-card__en { font-family: var(--font-en); font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: #365d8f; margin-bottom: .55rem; } .philosophy-card__title { font-size: 1.18rem; } .philosophy-card__body { color: var(--c-brown-2); font-size: .92rem; margin: 0; } .course-showcase { display: grid; gap: clamp(3rem, 5vw, 5.5rem); } .course-feature { display: grid; gap: clamp(1.5rem, 3vw, 3.5rem); align-items: center; } .course-feature__media { position: relative; background: #fff; padding: .7rem; box-shadow: 0 28px 70px -45px rgba(54,76,101,.65); } .course-feature__media::after { content: ""; position: absolute; left: 14px; right: -14px; top: 14px; bottom: -14px; border: 1px solid rgba(54,93,143,.24); z-index: -1; } .course-feature__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; } .course-feature__no { font-family: var(--font-en); font-size: .74rem; letter-spacing: .25em; text-transform: uppercase; color: #365d8f; margin-bottom: .45rem; } .course-feature__title { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); margin-bottom: .7rem; } .course-feature__catch { color: #365d8f; font-weight: 500; letter-spacing: .04em; margin-bottom: 1rem; } .course-feature__desc { color: var(--c-brown-2); } .course-feature__points { display: grid; gap: .55rem; margin-bottom: 1.4rem; } .course-feature__points li { display: flex; gap: .6rem; align-items: flex-start; color: var(--c-brown-2); font-size: .92rem; } .course-feature__check { width: 1em; height: 1em; margin-top: .35em; color: #365d8f; } .course-feature__price { display: flex; align-items: baseline; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--c-line); font-family: var(--font-en); font-size: clamp(1.4rem, 2.3vw, 1.8rem); color: var(--c-brown); } .course-feature__price span { font-family: var(--font-jp); font-size: .78rem; letter-spacing: .12em; color: var(--c-brown-3); } .service-price-note { margin-top: 2rem; text-align: center; font-size: .78rem; color: var(--c-brown-3); } .service-homecare__inner { display: grid; gap: 2rem; align-items: center; } .service-homecare__label { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 180px; border: 1px solid rgba(54,93,143,.2); background: rgba(255,255,255,.58); box-shadow: var(--shadow-card); font-family: var(--font-en); font-size: clamp(1.2rem, 2.7vw, 2rem); letter-spacing: .08em; color: #365d8f; } .service-homecare__label b { font-weight: 300; color: var(--c-gold-2); } @media (min-width: 760px) { .service-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .service-split--reverse .service-split__media { order: 2; } .service-card-grid { grid-template-columns: repeat(3, 1fr); } .service-recommend__inner { grid-template-columns: .8fr 1.2fr; } .philosophy-grid { grid-template-columns: repeat(2, 1fr); } .course-feature { grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); } .course-feature--reverse .course-feature__media { order: 2; } .service-homecare__inner { grid-template-columns: .8fr 1.2fr; } } @media (max-width: 759px) { .service-frame::before, .course-feature__media::after { inset: 10px -8px -8px 10px; } .service-diagram__caption { margin-top: -.7rem; width: 96%; } .course-feature__media img { aspect-ratio: 5 / 4; object-position: center 45%; } .service-hero__color-drops { opacity: .1; } } @media (prefers-reduced-motion: no-preference) { .service-hero__orb { animation: serviceOrb 8s ease-in-out infinite alternate; } .service-hero__color-drops i:nth-child(odd) { animation: serviceDrop 7s ease-in-out infinite alternate; } .service-hero__color-drops i:nth-child(even) { animation: serviceDrop 8.5s ease-in-out infinite alternate-reverse; } } @keyframes serviceOrb { from { transform: scale(.94); opacity: .72; } to { transform: scale(1.06); opacity: 1; } } @keyframes serviceDrop { from { translate: 0 0; } to { translate: 8px -12px; } } /* ============================================================ * Global navigation — submenu * ============================================================ */ @media (min-width: 901px) { .nav__list > .menu-item { position: relative; } .nav__list > .menu-item-has-children > a { padding-right: 1.15rem; } .nav__list > .menu-item-has-children > a::before { content: ""; position: absolute; top: 50%; right: 0; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-65%) rotate(45deg); transition: transform .3s var(--ease); } .nav__list > .menu-item-has-children:hover > a::before, .nav__list > .menu-item-has-children:focus-within > a::before { transform: translateY(-35%) rotate(225deg); } .site-nav .sub-menu { position: absolute; top: calc(100% + 14px); left: 50%; z-index: 100; width: max-content; min-width: 230px; padding: .65rem; background: rgba(252, 250, 246, .98); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: 0 24px 50px -28px rgba(74, 63, 53, .6); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .3s var(--ease), visibility .3s var(--ease), transform .3s var(--ease); } .site-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; } .nav__list > .menu-item:hover > .sub-menu, .nav__list > .menu-item:focus-within > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .site-nav .sub-menu .menu-item + .menu-item { border-top: 1px solid var(--c-line); } .site-nav .sub-menu a { display: block; padding: .75rem .9rem; font-size: .86rem; line-height: 1.6; letter-spacing: .05em; white-space: nowrap; color: var(--c-brown-2); transition: color .3s var(--ease), background .3s var(--ease); } .site-nav .sub-menu a:hover, .site-nav .sub-menu a:focus-visible, .site-nav .sub-menu .current-menu-item > a { color: var(--c-brown); background: var(--c-paper); } .site-nav .sub-menu a::after { display: none; } .nav__list > .current-menu-ancestor > a::after { right: 0; } } @media (max-width: 900px) { .mobile-nav__list .sub-menu { display: grid; gap: .1rem; margin: 0 0 .65rem .45rem; padding: .15rem 0 .15rem 1rem; border-left: 1px solid var(--c-gold-line); } .mobile-nav__list .sub-menu .menu-item { border-bottom: 0; } .mobile-nav__list .sub-menu .menu-item > a { position: relative; padding: .6rem .2rem .6rem .9rem; font-size: .88rem; color: var(--c-brown-2); } .mobile-nav__list .sub-menu .menu-item > a::before { content: ""; position: absolute; top: 50%; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--c-gold); transform: translateY(-50%); } } /* ============================================================ * Menu page — service guide cards * ============================================================ */ .service-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, .8rem + 2vw, 2rem); } .service-guide__card { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .service-guide__card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--c-gold), var(--c-gold-2)); } .service-guide__card:hover { transform: translateY(-5px); border-color: var(--c-gold-line); box-shadow: 0 26px 48px -24px rgba(74, 63, 53, .5); } .service-guide__eyebrow { margin: 0 0 .7rem; font-family: var(--font-en); font-size: .78rem; line-height: 1; letter-spacing: .28em; color: var(--c-gold-2); } .service-guide__title { margin: 0 0 .8rem; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); letter-spacing: .06em; } .service-guide__desc { margin: 0 0 1.5rem; color: var(--c-brown-2); font-size: .94rem; line-height: 2; flex: 1; } .service-guide__link { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--c-line); color: var(--c-brown); font-size: .9rem; letter-spacing: .06em; } .service-guide__icon { width: 1.1em; height: 1.1em; color: var(--c-gold-2); transition: transform .3s var(--ease); } .service-guide__link:hover .service-guide__icon { transform: translateX(4px); } @media (max-width: 699px) { .service-guide { grid-template-columns: 1fr; } } /* ============================================================ * Front view v6 — fixed brand content / background-only slider * 1枚目の完成度を全スライドで維持し、写真だけをクロスフェードする。 * ============================================================ */ .hero--consistent { min-height: min(850px, max(720px, calc(100svh - var(--header-h)))); text-align: center; } /* 各スライドは背景専用。色調は統一し、写真構図だけで差を出す。 */ .hero--consistent .hero__slide .hero__img, .hero--consistent .hero__slide--visual-1 .hero__img, .hero--consistent .hero__slide--visual-2 .hero__img, .hero--consistent .hero__slide--visual-3 .hero__img { filter: sepia(.055) saturate(.72) contrast(.96) brightness(1.045); } .hero--consistent .hero__veil, .hero--consistent .hero__slide--visual-1 .hero__veil, .hero--consistent .hero__slide--visual-2 .hero__veil, .hero--consistent .hero__slide--visual-3 .hero__veil { background: radial-gradient( ellipse 48% 72% at 50% 43%, rgba(252, 250, 246, .95) 0%, rgba(247, 244, 239, .76) 45%, rgba(247, 244, 239, .26) 72%, transparent 100% ), linear-gradient( 90deg, rgba(74, 63, 53, .24) 0%, rgba(220, 207, 191, .08) 27%, rgba(220, 207, 191, .08) 73%, rgba(74, 63, 53, .24) 100% ), linear-gradient( 180deg, rgba(247, 244, 239, .08), rgba(74, 63, 53, .12) ); } /* ブランド内容を常時中央に固定。 */ .hero-scene--persistent { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: clamp(3.6rem, 6vh, 5.8rem) 22px clamp(9.5rem, 15vh, 12rem); pointer-events: none; } .hero--consistent .hero-scene__content--brand { position: relative; width: min(100%, 690px); padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.8rem); opacity: 1; transform: none; pointer-events: auto; } .hero--consistent .hero-scene__content--brand::before, .hero--consistent .hero-scene__content--brand::after { width: min(86%, 540px); } .hero--consistent .hero-scene__logo { width: clamp(290px, 26vw, 430px); } .hero--consistent .hero-scene__title--brand { margin-bottom: .55rem; } .hero--consistent .hero-scene__lead--brand { margin-bottom: 1.75rem; } /* 予約導線も内容と一体化。どの背景でも位置・見た目は変えない。 */ .hero--consistent .hero__cta { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; } .hero--consistent .hero__cta .btn { min-width: 220px; padding: .94em 1.7em; border-radius: 4px; box-shadow: 0 15px 32px -25px rgba(53, 43, 36, .78); } /* 章ナビは廃止し、背景画像の切り替えだけを示す静かなドットへ戻す。 */ .hero--consistent .hero__dots { position: absolute; left: 50%; bottom: clamp(70px, 8.5vh, 88px); z-index: 7; display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 0; transform: translateX(-50%); } .hero--consistent .hero__dot, .hero--consistent .hero__dot.is-active { position: relative; display: block; width: 8px; height: 8px; padding: 0; border: 1px solid rgba(74, 63, 53, .55); border-radius: 999px; background: rgba(247, 244, 239, .18); color: transparent; font-size: 0; line-height: 0; cursor: pointer; transition: width .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); } .hero--consistent .hero__dot::before, .hero--consistent .hero__dot::after { content: none !important; display: none !important; } .hero--consistent .hero__dot:hover, .hero--consistent .hero__dot:focus-visible { border-color: var(--hero-gold-deep); transform: scale(1.08); } .hero--consistent .hero__dot.is-active { width: 28px; border-color: var(--hero-gold-deep); background: var(--hero-gold-deep); } /* 2枚目・3枚目も同一設計のため、旧シーン固有アニメーションを無効化。 */ .hero--consistent .hero-scene__heat, .hero--consistent .hero-scene__flower, .hero--consistent .hero__fixed { display: none !important; } @media (prefers-reduced-motion: no-preference) { .hero--consistent .hero__slide.is-active .hero__img { animation: heroConsistentZoom 10s ease-out both; } } @keyframes heroConsistentZoom { from { transform: scale(1.012); } to { transform: scale(1.047); } } @media (max-width: 760px) { .hero--consistent { min-height: min(780px, calc(100svh - var(--header-h))); } .hero-scene--persistent { padding: 2.8rem 16px 9rem; } .hero--consistent .hero-scene__content--brand { width: min(100%, 520px); padding: 1.2rem .55rem 1.4rem; } .hero--consistent .hero-scene__logo { width: clamp(245px, 70vw, 320px); } .hero--consistent .hero-scene__kicker { font-size: .61rem; letter-spacing: .23em; } .hero--consistent .hero-scene__title--brand { font-size: clamp(1.28rem, 5.2vw, 1.65rem); line-height: 1.75; letter-spacing: .075em; } .hero--consistent .hero-scene__lead--brand { font-size: .87rem; letter-spacing: .075em; margin-bottom: 1.35rem; } .hero--consistent .hero__cta { width: min(100%, 340px); margin-inline: auto; flex-direction: column; gap: .65rem; } .hero--consistent .hero__cta .btn { width: 100%; min-width: 0; } .hero--consistent .hero__dots { bottom: 64px; } } @media (max-width: 420px) { .hero--consistent .hero-scene__content--brand::before, .hero--consistent .hero-scene__content--brand::after { width: 94%; } .hero--consistent .hero-scene__kicker::before, .hero--consistent .hero-scene__kicker::after { width: 20px; } } /* ============================================================ * v7 Top page brush-up * - Hero: same content, but background differences read clearly * - Strength: richer luxury showcase under FV * - Owner & Salon: remove unclear abstract sub image and replace with meaningful salon visuals * ============================================================ */ /* ---------- Strength section : make the area under the hero richer ---------- */ .front .section--strength { position: relative; padding-block: 0; background: #F7F2EB; overflow: hidden; } .strength-lux { position: relative; padding: clamp(4.6rem, 8vw, 6rem) 0 clamp(4rem, 7vw, 5.4rem); background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.82), transparent 42%), linear-gradient(180deg, #FCF8F2 0%, #F2E5D4 58%, #F8F2EA 100%); } .strength-lux::before, .strength-lux::after { content: ""; position: absolute; pointer-events: none; } .strength-lux::before { left: -4%; right: -4%; bottom: -4%; height: 38%; background: radial-gradient(ellipse at 24% 58%, rgba(217,184,124,.20), transparent 28%), radial-gradient(ellipse at 76% 54%, rgba(217,184,124,.18), transparent 26%), linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.16)); opacity: .85; } .strength-lux::after { left: 0; right: 0; bottom: 0; height: 200px; background: radial-gradient(ellipse at 14% 100%, rgba(255,255,255,.72), transparent 42%), radial-gradient(ellipse at 86% 100%, rgba(255,255,255,.72), transparent 42%); } .strength-lux__photo { position: absolute; top: 0; z-index: 1; margin: 0; width: min(31vw, 480px); max-width: 36%; } .strength-lux__photo--left { left: min(2.2vw, 34px); top: clamp(2.2rem, 5vw, 4.2rem); } .strength-lux__photo--right { right: min(2.2vw, 34px); top: clamp(1.2rem, 4vw, 3rem); } .strength-lux__photo-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; box-shadow: 0 32px 72px -44px rgba(74,63,53,.42); } .strength-lux__photo::after { content: ""; position: absolute; inset: auto; left: 12%; right: 12%; bottom: -14px; height: 28px; background: radial-gradient(ellipse at center, rgba(74,63,53,.18), transparent 70%); filter: blur(7px); } .strength-lux__inner { position: relative; z-index: 3; } .strength-lux__head { max-width: min(920px, 74vw); margin-inline: auto; } .front .section--strength .section__title--strength { font-size: clamp(2rem, 1.35rem + 2vw, 3.55rem); letter-spacing: .035em; line-height: 1.3; } .front .section--strength .section__desc { font-size: clamp(1rem, .92rem + .34vw, 1.26rem); letter-spacing: .08em; line-height: 1.9; color: #6A584A; } .strength-lux__medals { position: relative; margin-top: clamp(2.2rem, 4vw, 3rem); padding: 0 clamp(.6rem, 2vw, 1.4rem); } .front .section--strength .medals { position: relative; z-index: 2; gap: clamp(2rem, 4vw, 2.8rem); } .front .section--strength .medal { width: 100%; max-width: 360px; } .front .section--strength .medal__frame { filter: drop-shadow(0 18px 34px rgba(176, 136, 74, .24)); } .front .section--strength .medal__ribbon { box-shadow: 0 14px 26px -18px rgba(74,63,53,.45); } .strength-lux__closing { position: relative; z-index: 3; margin: clamp(1.7rem, 3vw, 2.3rem) auto 0; text-align: center; font-size: clamp(1rem, .94rem + .3vw, 1.28rem); line-height: 1.9; letter-spacing: .09em; color: #5A4839; } .strength-lux__brand { margin-top: .7rem; text-align: center; } .strength-lux__logo { width: min(290px, 42vw); height: auto; opacity: .94; } .strength-lux__more { margin-top: 1.3rem; } @media (min-width: 860px) { .front .section--strength .medal { --disc: min(22vw, 292px); } .front .section--strength .medal--feature { --disc: min(25vw, 346px); margin-top: -1.25rem; } } @media (max-width: 1024px) { .strength-lux__photo { width: min(28vw, 340px); max-width: 30%; opacity: .9; } .strength-lux__head { max-width: min(760px, 84vw); } } @media (max-width: 820px) { .strength-lux { padding-top: 4.2rem; } .strength-lux__photo { position: relative; top: auto; left: auto; right: auto; width: min(82vw, 420px); max-width: none; margin: 0 auto 1.2rem; } .strength-lux__photo--right { display: none; } .strength-lux__head { max-width: 100%; } .front .section--strength .section__title--strength { font-size: clamp(1.72rem, 7vw, 2.5rem); } .strength-lux__closing { font-size: .98rem; line-height: 1.85; letter-spacing: .06em; } .strength-lux__logo { width: min(240px, 62vw); } } /* ---------- Owner & Salon : replace the unclear image with meaningful salon visuals ---------- */ .section--home-salon { background: radial-gradient(circle at 14% 16%, rgba(255,255,255,.72), transparent 32%), linear-gradient(135deg, #FBF7F1 0%, #EDE2D4 100%); } .section--home-salon::after { right: -64px; top: -82px; width: 300px; height: 300px; border-color: rgba(198,167,123,.16); } .home-salon { gap: clamp(2.8rem, 5vw, 6.2rem); } .home-salon__visual { min-height: clamp(520px, 48vw, 660px); } .home-salon__portrait { width: min(68%, 430px); z-index: 2; } .home-salon__portrait::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid rgba(198,167,123,.22); pointer-events: none; } .home-salon__portrait-img { border-radius: 24px 24px 120px 24px; box-shadow: 0 34px 72px -44px rgba(74,63,53,.58); } .home-salon__space { border-radius: 24px; overflow: hidden; background: rgba(255,255,255,.92); box-shadow: 0 28px 56px -42px rgba(74,63,53,.54); } .home-salon__space--main { right: 0; bottom: 0; width: min(50%, 300px); padding: 10px; z-index: 3; } .home-salon__space--detail { left: 30%; bottom: 4%; width: min(34%, 220px); padding: 8px; z-index: 4; transform: translateY(8%); } .home-salon__space-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; } .home-salon__space-img--detail { aspect-ratio: 1 / 1; } .home-salon__space-caption { position: absolute; left: 20px; bottom: 18px; display: inline-flex; align-items: center; padding: .38rem .72rem; border-radius: 999px; background: rgba(74,63,53,.82); color: #F6EFE5; font-family: var(--font-en); font-size: .62rem; line-height: 1; letter-spacing: .18em; text-transform: uppercase; } .home-salon__space-caption--detail { left: 16px; bottom: 16px; background: rgba(198,167,123,.86); color: #fff; } .home-salon__flower { left: auto; right: 7%; top: 4%; width: 88px; opacity: .18; } .home-salon__body { max-width: 520px; } .home-salon__lead { font-size: clamp(1rem, .95rem + .18vw, 1.08rem); line-height: 2.1; } .home-salon__quote { margin-top: 1.55rem; padding: 1.3rem 0 1.3rem 1.4rem; background: linear-gradient(90deg, rgba(255,255,255,.26), transparent 72%); border-left: 1px solid rgba(198,167,123,.78); } @media (max-width: 900px) { .home-salon__visual { min-height: 540px; } .home-salon__space--detail { left: 34%; bottom: 2%; width: min(34%, 190px); } } @media (max-width: 680px) { .home-salon__visual { min-height: 520px; } .home-salon__portrait { width: min(74%, 380px); } .home-salon__space--main { width: min(58%, 270px); } .home-salon__space--detail { left: auto; right: 0; bottom: 2%; width: min(42%, 190px); transform: none; } } @media (max-width: 460px) { .home-salon__visual { min-height: 470px; } .home-salon__portrait { width: 78%; } .home-salon__portrait::after { inset: 10px -10px -10px 10px; } .home-salon__space--main { width: 56%; padding: 7px; } .home-salon__space--detail { width: 38%; padding: 6px; } .home-salon__flower { right: 10%; width: 70px; } .home-salon__space-caption, .home-salon__space-caption--detail { font-size: .54rem; letter-spacing: .12em; left: 12px; bottom: 12px; padding: .34rem .54rem; } } /* ============================================================ * v8 correction — simplify and clarify * ============================================================ */ /* ---------- Strength: one clear background image, no side objects ---------- */ .front .section--strength { padding: 0; background: #F8F2EA; } .strength-lux { position: relative; isolation: isolate; min-height: 760px; padding: clamp(4.5rem, 7vw, 6rem) 0 clamp(4rem, 6vw, 5.2rem); overflow: hidden; background: #F4E9DC; } .strength-lux::before, .strength-lux::after { display: none; } .strength-lux__backdrop { position: absolute; inset: 0; z-index: -3; margin: 0; } .strength-lux__backdrop-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; filter: sepia(.10) saturate(.78) brightness(1.14) contrast(.90); transform: scale(1.02); } .strength-lux__veil { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 58% 78% at 50% 42%, rgba(255,252,247,.94) 0%, rgba(250,244,235,.86) 48%, rgba(245,233,217,.65) 74%, rgba(227,207,184,.48) 100%), linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05)); } .strength-lux__inner { position: relative; z-index: 2; } .strength-lux__head { max-width: 900px; margin-inline: auto; } .strength-lux__medals { margin-top: clamp(2.2rem, 4vw, 3.1rem); padding: 0; } .front .section--strength .medals { justify-content: center; gap: clamp(1.3rem, 3vw, 2.8rem); } .front .section--strength .medal__frame { filter: drop-shadow(0 18px 30px rgba(139,100,48,.22)); } .strength-lux__closing { margin-top: clamp(1.8rem, 3vw, 2.4rem); font-size: clamp(1rem, .93rem + .28vw, 1.22rem); color: #5A4839; } .strength-lux__more { margin-top: 1.4rem; } .strength-lux__photo, .strength-lux__brand { display: none !important; } @media (max-width: 820px) { .strength-lux { min-height: auto; padding-top: 4rem; } .strength-lux__backdrop-img { object-position: 50% 30%; } .strength-lux__veil { background: linear-gradient(180deg, rgba(253,248,241,.94), rgba(244,231,214,.82)), radial-gradient(circle at 50% 20%, rgba(255,255,255,.75), transparent 42%); } } /* ---------- Owner & Salon: no overlapping mystery images ---------- */ .section--home-salon { background: radial-gradient(circle at 18% 10%, rgba(255,255,255,.76), transparent 32%), linear-gradient(135deg, #FBF7F1 0%, #EEE3D6 100%); } .home-salon { display: grid; grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(3rem, 5vw, 6rem); } .home-salon__portrait { position: relative; left: auto; top: auto; width: 100%; max-width: 470px; margin: 0 auto; z-index: 1; } .home-salon__portrait::after { inset: 16px -16px -16px 16px; border-radius: 24px 24px 120px 24px; } .home-salon__portrait-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 24px 24px 120px 24px; } .home-salon__body { max-width: 600px; } .home-salon__space { position: relative; left: auto; right: auto; bottom: auto; width: 100%; max-width: none; margin: 2rem 0 0; padding: 8px; border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: 0 24px 54px -42px rgba(74,63,53,.56); overflow: hidden; } .home-salon__space-img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 14px; } .home-salon__space-caption { position: absolute; left: 22px; bottom: 20px; padding: .48rem .78rem; border-radius: 999px; background: rgba(74,63,53,.82); color: #F8F2EA; font-size: .72rem; letter-spacing: .08em; } .home-salon__space--main, .home-salon__space--detail, .home-salon__flower { display: none !important; } @media (max-width: 760px) { .home-salon { grid-template-columns: 1fr; gap: 2.5rem; } .home-salon__portrait { max-width: 420px; } .home-salon__space-img { aspect-ratio: 4 / 3; } } /* ============================================================ * v9 TOP sections brush-up * Concerns / Reasons / Flow * ============================================================ */ /* ---------- Concerns ---------- */ .section--concerns-lux { position: relative; overflow: hidden; background: radial-gradient(circle at 10% 12%, rgba(255,255,255,.86), transparent 31%), radial-gradient(circle at 92% 84%, rgba(213,188,151,.18), transparent 30%), linear-gradient(135deg, #F9F5EF 0%, #EFE4D7 100%); } .section--concerns-lux::before, .section--concerns-lux::after { content: ""; position: absolute; pointer-events: none; border: 1px solid rgba(198,167,123,.15); border-radius: 50%; } .section--concerns-lux::before { left: -140px; top: -190px; width: 420px; height: 420px; } .section--concerns-lux::after { right: -170px; bottom: -220px; width: 520px; height: 520px; } .concerns-lux { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.45fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: center; } .concerns-lux__intro { position: relative; padding: clamp(2rem, 3.5vw, 3.3rem); border-left: 1px solid rgba(198,167,123,.72); } .concerns-lux__flower { display: inline-flex; width: 34px; height: 34px; margin-bottom: 1rem; color: var(--c-gold-2); opacity: .72; } .concerns-lux__flower .icon { width: 100%; height: 100%; } .concerns-lux__intro .eyebrow { justify-content: flex-start; margin-bottom: .8rem; } .concerns-lux__intro .eyebrow::before { display: none; } .concerns-lux__intro .section__title { margin-bottom: 1.15rem; font-size: clamp(2rem, 1.45rem + 1.7vw, 3.35rem); line-height: 1.42; letter-spacing: .045em; } .concerns-lux__lead { max-width: 430px; margin: 0; font-size: .98rem; line-height: 2.05; color: var(--c-brown-2); } .concerns-lux__count { display: flex; align-items: flex-end; gap: .8rem; margin-top: clamp(2.1rem, 4vw, 3.2rem); color: rgba(198,167,123,.88); } .concerns-lux__count-num { font-family: var(--font-en); font-size: clamp(4.4rem, 8vw, 7.5rem); line-height: .78; font-weight: 400; letter-spacing: -.045em; } .concerns-lux__count-label { padding-bottom: .45rem; font-family: var(--font-en); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--c-brown-2); } .concerns-lux__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } .concerns-lux__item { position: relative; display: grid; grid-template-columns: auto auto 1fr; gap: .85rem; align-items: center; min-height: 104px; padding: 1.2rem 1.25rem; background: rgba(255,255,255,.74); border: 1px solid rgba(111,92,72,.12); border-radius: 4px; box-shadow: 0 18px 42px -34px rgba(74,63,53,.46); backdrop-filter: blur(8px); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); } .concerns-lux__item:nth-child(2), .concerns-lux__item:nth-child(4) { transform: translateY(16px); } .concerns-lux__item:last-child { grid-column: 1 / -1; width: calc(50% - .5rem); justify-self: center; } .concerns-lux__item:hover { transform: translateY(-4px); background: rgba(255,255,255,.92); border-color: rgba(198,167,123,.42); box-shadow: 0 24px 48px -30px rgba(74,63,53,.42); } .concerns-lux__item:nth-child(2):hover, .concerns-lux__item:nth-child(4):hover { transform: translateY(12px); } .concerns-lux__no { font-family: var(--font-en); font-size: .66rem; letter-spacing: .16em; color: rgba(198,167,123,.9); } .concerns-lux__check { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(198,167,123,.48); border-radius: 50%; color: var(--c-gold-2); } .concerns-lux__check .icon { width: 14px; height: 14px; } .concerns-lux__text { font-size: 1rem; line-height: 1.8; letter-spacing: .035em; color: var(--c-brown); } .concerns-lux__footer { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(40px, 1fr) auto auto; gap: 1.3rem; align-items: center; margin-top: clamp(2.6rem, 5vw, 4rem); } .concerns-lux__footer-line { display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(198,167,123,.68)); } .concerns-lux__footer p { margin: 0; font-size: .92rem; line-height: 1.8; color: var(--c-brown-2); } .concerns-lux__btn { white-space: nowrap; background: rgba(255,255,255,.48); } @media (max-width: 900px) { .concerns-lux { grid-template-columns: 1fr; gap: 2rem; } .concerns-lux__intro { max-width: 680px; } .concerns-lux__count { position: absolute; right: 1.2rem; bottom: 1.7rem; opacity: .65; } .concerns-lux__count-num { font-size: 4.4rem; } } @media (max-width: 680px) { .concerns-lux__intro { padding: 1.2rem 0 1.2rem 1.35rem; } .concerns-lux__intro .section__title { font-size: clamp(1.8rem, 8vw, 2.55rem); } .concerns-lux__count { display: none; } .concerns-lux__list { grid-template-columns: 1fr; gap: .75rem; } .concerns-lux__item, .concerns-lux__item:nth-child(2), .concerns-lux__item:nth-child(4), .concerns-lux__item:last-child { width: 100%; grid-column: auto; transform: none; justify-self: stretch; } .concerns-lux__item:hover, .concerns-lux__item:nth-child(2):hover, .concerns-lux__item:nth-child(4):hover { transform: translateY(-2px); } .concerns-lux__footer { grid-template-columns: 1fr; text-align: center; } .concerns-lux__footer-line { width: 72px; margin-inline: auto; background: linear-gradient(90deg, transparent, rgba(198,167,123,.72), transparent); } .concerns-lux__btn { width: min(100%, 320px); margin-inline: auto; } } /* ---------- Reasons ---------- */ .section--features-lux { position: relative; overflow: hidden; background: radial-gradient(circle at 82% 14%, rgba(198,167,123,.13), transparent 31%), radial-gradient(circle at 15% 85%, rgba(198,167,123,.08), transparent 28%), linear-gradient(135deg, #33291F 0%, #49392C 52%, #2F261E 100%); color: #F8F1E7; } .section--features-lux::before { content: "REASONS"; position: absolute; right: -1.8vw; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center; font-family: var(--font-en); font-size: clamp(5rem, 11vw, 10rem); line-height: 1; letter-spacing: .12em; color: rgba(255,255,255,.022); pointer-events: none; } .features-lux { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(270px, .8fr) minmax(0, 1.45fr); gap: clamp(2.6rem, 5vw, 6rem); align-items: stretch; } .features-lux__intro { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 4vw, 3.4rem); border: 1px solid rgba(222,198,161,.2); background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .features-lux__flower { display: inline-flex; width: 38px; height: 38px; margin-bottom: 1.2rem; color: #D6B57F; opacity: .78; } .features-lux__flower .icon { width: 100%; height: 100%; } .features-lux__intro .eyebrow { justify-content: flex-start; color: #D6B57F; } .features-lux__intro .eyebrow::before { display: none; } .features-lux__intro .section__title { margin-bottom: 1.2rem; font-size: clamp(2rem, 1.45rem + 1.7vw, 3.2rem); color: #FFF8EF; } .features-lux__lead { margin: 0; font-size: .96rem; line-height: 2.15; color: rgba(255,248,239,.68); } .features-lux__signature { font-size: 0; line-height: 0; color: transparent; } .features-lux__signature img { display: block; width: clamp(160px, 22vw, 248px); height: auto; opacity: .17; /* 暗い背景に沈まないよう、ごく淡い発光を添える */ filter: drop-shadow(0 0 18px rgba(214, 181, 127, .10)); } @media (max-width: 900px) { .features-lux__signature { font-size: 0; line-height: 0; } .features-lux__signature img { width: clamp(150px, 26vw, 214px); } } @media (max-width: 620px) { .features-lux__signature { font-size: 0; line-height: 0; margin-top: 2.4rem; padding-top: 0; } .features-lux__signature img { width: min(62%, 230px); opacity: .19; } } .features-lux__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .feature-lux { position: relative; display: flex; flex-direction: column; min-height: 250px; padding: clamp(1.5rem, 2.5vw, 2.2rem); border: 1px solid rgba(232,213,185,.16); background: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); } .feature-lux--accent { background: linear-gradient(145deg, rgba(214,181,127,.16), rgba(255,255,255,.035)); border-color: rgba(214,181,127,.34); } .feature-lux:hover { transform: translateY(-5px); background: rgba(255,255,255,.065); border-color: rgba(214,181,127,.42); } .feature-lux__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(1.7rem, 3vw, 2.5rem); } .feature-lux__no { font-family: var(--font-en); font-size: .7rem; letter-spacing: .24em; color: #D6B57F; } .feature-lux__icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(214,181,127,.42); border-radius: 50%; color: #E5C998; } .feature-lux__icon .icon { width: 20px; height: 20px; } .feature-lux__title { margin: 0 0 .85rem; font-size: clamp(1.08rem, 1rem + .25vw, 1.27rem); line-height: 1.75; letter-spacing: .04em; color: #FFF8EF; } .feature-lux__desc { margin: 0; font-size: .9rem; line-height: 2; color: rgba(255,248,239,.63); } .feature-lux__line { display: block; width: 36px; height: 1px; margin-top: auto; padding-top: 1.4rem; border-bottom: 1px solid rgba(214,181,127,.58); } @media (max-width: 900px) { .features-lux { grid-template-columns: 1fr; } .features-lux__intro { min-height: 360px; } .features-lux__signature { position: absolute; right: 1.8rem; bottom: 1rem; } } @media (max-width: 620px) { .features-lux__grid { grid-template-columns: 1fr; } .feature-lux { min-height: 220px; } .features-lux__intro { min-height: 0; padding: 2rem 1.4rem 3rem; } .features-lux__signature { position: static; margin-top: 2rem; padding-top: 0; font-size: 4rem; } } /* ---------- Flow ---------- */ .section--flow-lux { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.78), transparent 40%), linear-gradient(180deg, #F3E9DD 0%, #EADCCB 100%); } .section--flow-lux::before, .section--flow-lux::after { content: ""; position: absolute; pointer-events: none; } .section--flow-lux::before { left: -80px; bottom: -130px; width: 360px; height: 360px; border: 1px solid rgba(198,167,123,.16); border-radius: 50%; } .section--flow-lux::after { right: -60px; top: -100px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255,255,255,.32), transparent 70%); } .flow-lux__head { position: relative; z-index: 2; max-width: 780px; } .flow-lux__head .section__desc { max-width: 650px; margin-inline: auto; line-height: 2; } .flow-lux { position: relative; z-index: 2; } .flow-lux__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.3rem); margin: clamp(2.6rem, 5vw, 4rem) 0 0; padding: 0; list-style: none; } .flow-lux__list::before { content: ""; position: absolute; left: calc(12.5% - 6px); right: calc(12.5% - 6px); top: 35px; height: 1px; background: linear-gradient(90deg, rgba(198,167,123,.18), rgba(198,167,123,.75), rgba(198,167,123,.18)); } .flow-lux__item { position: relative; min-width: 0; } .flow-lux__marker { position: relative; z-index: 2; display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto -24px; border: 1px solid rgba(198,167,123,.68); border-radius: 50%; background: #F8F2E9; box-shadow: 0 0 0 8px rgba(248,242,233,.78), 0 12px 24px -16px rgba(74,63,53,.38); } .flow-lux__marker::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(198,167,123,.26); border-radius: inherit; } .flow-lux__marker span { font-family: var(--font-en); font-size: .76rem; letter-spacing: .16em; color: var(--c-gold-2); } .flow-lux__card { min-height: 270px; padding: 3.7rem 1.25rem 1.6rem; text-align: center; background: rgba(255,255,255,.68); border: 1px solid rgba(111,92,72,.12); border-radius: 4px; box-shadow: 0 22px 46px -34px rgba(74,63,53,.44); transition: transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); } .flow-lux__item:hover .flow-lux__card { transform: translateY(-5px); background: rgba(255,255,255,.88); box-shadow: 0 28px 52px -34px rgba(74,63,53,.5); } .flow-lux__en { margin: 0 0 .8rem; font-family: var(--font-en); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--c-gold-2); } .flow-lux__title { margin: 0 0 .85rem; font-size: clamp(1.08rem, 1rem + .3vw, 1.3rem); line-height: 1.65; letter-spacing: .045em; color: var(--c-brown); } .flow-lux__desc { margin: 0; font-size: .86rem; line-height: 1.95; color: var(--c-brown-2); } .flow-lux__footer { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2rem); margin-top: clamp(2.5rem, 4vw, 3.6rem); padding-top: 1.7rem; border-top: 1px solid rgba(198,167,123,.28); } .flow-lux__footer p { margin: 0; font-size: .9rem; line-height: 1.8; color: var(--c-brown-2); } .flow-lux__footer .section__more { margin: 0; } @media (max-width: 960px) { .flow-lux__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 1rem; } .flow-lux__list::before { display: none; } } @media (max-width: 620px) { .flow-lux__list { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.2rem; } .flow-lux__item { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: stretch; } .flow-lux__item::before { content: ""; position: absolute; left: 30px; top: 62px; bottom: -18px; width: 1px; background: rgba(198,167,123,.35); } .flow-lux__item:last-child::before { display: none; } .flow-lux__marker { width: 58px; height: 58px; margin: 1.1rem 0 0; } .flow-lux__card { min-height: 0; padding: 1.3rem 1.25rem; text-align: left; } .flow-lux__footer { flex-direction: column; text-align: center; } } /* ============================================================ * v10 3つのアプローチ：詳細ページへの導線 * ============================================================ */ .approach { display: flex; flex-direction: column; } .approach__body { flex: 1; } .approach__links { display: grid; gap: .7rem; margin-top: 1.55rem; padding-top: 1.25rem; border-top: 1px solid rgba(198, 167, 123, .28); } .approach__link { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; min-height: 48px; padding: .8rem 1rem; border: 1px solid rgba(198, 167, 123, .62); border-radius: 3px; background: rgba(255, 255, 255, .5); color: var(--c-brown); font-size: .84rem; line-height: 1.5; letter-spacing: .055em; text-align: center; transition: background .32s var(--ease), color .32s var(--ease), border-color .32s var(--ease), transform .32s var(--ease), box-shadow .32s var(--ease); } .approach__link:hover, .approach__link:focus-visible { background: var(--c-brown); border-color: var(--c-brown); color: var(--c-ivory); transform: translateY(-2px); box-shadow: 0 14px 26px -20px rgba(74, 63, 53, .72); } .approach__link-icon { width: 1em; height: 1em; flex: 0 0 auto; transition: transform .3s var(--ease); } .approach__link:hover .approach__link-icon, .approach__link:focus-visible .approach__link-icon { transform: translateX(3px); } .approach__links--pair { grid-template-columns: 1fr; } .approach--accent .approach__link { background: rgba(255, 252, 246, .72); } @media (min-width: 1100px) { .approach__links--pair .approach__link { font-size: .77rem; padding-inline: .65rem; } } @media (max-width: 819px) { .approach__links { margin-top: 1.35rem; } .approach__link { max-width: 320px; margin-inline: auto; } } @media (prefers-reduced-motion: reduce) { .approach__link, .approach__link-icon { transition: none; } .approach__link:hover, .approach__link:focus-visible { transform: none; } } /* ============================================================ * v14 Concept page strength spacing * The top-page strength art is scoped under .front above. * ============================================================ */ .page--concept .section--concept-strength { padding-block: clamp(4.8rem, 3.4rem + 4.5vw, 7.2rem) clamp(5.8rem, 4rem + 5vw, 8rem); background: radial-gradient( circle at 50% 16%, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, 0) 42% ), linear-gradient(180deg, #FCF8F2 0%, #F7F1E8 100%); } .page--concept .section--concept-strength .section__head { margin-bottom: clamp(2.8rem, 2rem + 2vw, 4.2rem); } .page--concept .section--concept-strength .medals { margin-top: 0; margin-bottom: 0; } .page--concept .section--concept-strength .medal__body { margin-top: 1.25rem; line-height: 2; } @media (max-width: 859px) { .page--concept .section--concept-strength { padding-block: clamp(4rem, 3rem + 4vw, 5.6rem) clamp(4.8rem, 3.6rem + 4vw, 6.4rem); } .page--concept .section--concept-strength .section__head { margin-bottom: 2.4rem; } } /* ============================================================ * v17 Adobe Stock hero slider — final consolidated rules * slider01.webp / slider02.webp / slider03.webp * ============================================================ */ .hero--refined { position: relative; isolation: isolate; overflow: hidden; background: #f2eadf; } /* 以前の後付け葉・花・葉影は使用しない */ .hero--refined .hero-leaves, .hero--refined .hero__tropical-art, .hero--refined .hero__palm-shadows { display: none !important; } /* 旧バージョンの円・模様・疑似装飾を停止 */ .hero--refined .hero__slide::before, .hero--refined .hero__slide::after { content: none !important; display: none !important; } .hero--refined .hero__slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero--refined .hero__slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1.35s var(--ease), visibility 1.35s var(--ease); } .hero--refined .hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .hero--refined .hero__slide picture, .hero--refined .hero__slide .hero__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .hero--refined .hero__slide .hero__img { z-index: 0; object-fit: cover; object-position: var(--hero-position, 50% 50%); opacity: 1 !important; filter: saturate(.82) contrast(.96) brightness(1.02) !important; transform: scale(1.012); will-change: transform, opacity; } /* 3枚とも中央のブランド表示を読みやすくする共通ベール */ .hero--refined .hero__slide .hero__veil, .hero--refined .hero__slide--gift .hero__veil, .hero--refined .hero__slide--warmth .hero__veil, .hero--refined .hero__slide--private .hero__veil { position: absolute; inset: 0; z-index: 1; display: block !important; pointer-events: none; background: radial-gradient( ellipse 50% 75% at 50% 42%, rgba(252, 249, 244, .93) 0%, rgba(250, 246, 240, .78) 43%, rgba(247, 241, 233, .36) 69%, rgba(247, 241, 233, .05) 100% ), linear-gradient( 180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 62%, rgba(74, 63, 53, .08) 100% ) !important; } /* 2枚目・3枚目は素材差を残しつつ色温度だけ統一 */ .hero--refined .hero__slide--warmth .hero__img { filter: sepia(.04) saturate(.78) contrast(.95) brightness(1.04) !important; } .hero--refined .hero__slide--private .hero__img { filter: sepia(.06) saturate(.74) contrast(.95) brightness(1.03) !important; } /* 中央のブランドコンテンツは全スライドで固定 */ .hero--refined .hero-scene--persistent { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; width: 100%; max-width: none; margin: 0; padding: clamp(3.8rem, 7vh, 6.2rem) 22px clamp(9.2rem, 14vh, 11.5rem); text-align: center; pointer-events: none; } .hero--refined .hero-scene__content--brand { position: relative; width: min(100%, 720px); max-width: 720px; margin-inline: auto; padding: clamp(1.45rem, 2.8vw, 2.35rem) clamp(.9rem, 2.5vw, 2.3rem); opacity: 1; transform: none; text-align: center; text-shadow: none; pointer-events: auto; } /* 四角いカードにせず、ロゴ周辺だけ柔らかく明るくする */ .hero--refined .hero-scene__content--brand::before { content: ""; position: absolute; inset: -2.1rem -3rem; z-index: -1; border: 0; background: radial-gradient( ellipse at center, rgba(255, 255, 255, .66) 0%, rgba(255, 255, 255, .30) 55%, rgba(255, 255, 255, 0) 79% ); pointer-events: none; } .hero--refined .hero-scene__content--brand::after { content: ""; position: absolute; left: 50%; right: auto; top: auto; bottom: 0; width: min(82%, 520px); height: 1px; background: linear-gradient(90deg, transparent, rgba(198, 167, 123, .44), transparent); transform: translateX(-50%); pointer-events: none; } .hero--refined .hero-scene__logo-wrap, .hero--refined .hero__cta { justify-content: center; } .hero--refined .hero__cta .btn { backdrop-filter: blur(8px); } .hero--refined .hero__paper-back { fill: rgba(224, 211, 194, .94); } .hero--refined .hero__paper-front { fill: #f8f4ee; } /* ズームはごく僅か。動きが苦手な設定では停止 */ @media (prefers-reduced-motion: no-preference) { .hero--refined .hero__slide.is-active .hero__img { animation: makanaStockHeroZoom 9.5s ease-out both; } } @keyframes makanaStockHeroZoom { from { transform: scale(1.012); } to { transform: scale(1.032); } } @media (prefers-reduced-motion: reduce) { .hero--refined .hero__slide, .hero--refined .hero__slide .hero__img { transition: none !important; animation: none !important; } } /* PCでは素材全体を活かす */ @media (min-width: 761px) { .hero--refined .hero__slide--gift .hero__img, .hero--refined .hero__slide--warmth .hero__img, .hero--refined .hero__slide--private .hero__img { object-position: var(--hero-position, 50% 50%); } } /* スマホは横長素材の見せ場を残すよう、スライド別に位置を調整 */ @media (max-width: 760px) { .hero--refined { background: #f5eee5; } .hero--refined .hero__slide .hero__img { transform: scale(1.01); filter: saturate(.76) contrast(.94) brightness(1.05) !important; } /* slider01：右側の実葉を少し残す */ .hero--refined .hero__slide--gift .hero__img { object-position: 68% 50% !important; } /* slider02：左側から入る葉影を残す */ .hero--refined .hero__slide--warmth .hero__img { object-position: 38% 50% !important; } /* slider03：中央余白を優先 */ .hero--refined .hero__slide--private .hero__img { object-position: 50% 50% !important; } .hero--refined .hero__slide .hero__veil, .hero--refined .hero__slide--gift .hero__veil, .hero--refined .hero__slide--warmth .hero__veil, .hero--refined .hero__slide--private .hero__veil { background: radial-gradient( ellipse 92% 68% at 50% 42%, rgba(252, 249, 244, .94) 0%, rgba(250, 246, 240, .83) 48%, rgba(247, 241, 233, .38) 76%, rgba(247, 241, 233, .05) 100% ), linear-gradient( 180deg, rgba(255, 255, 255, .06), rgba(74, 63, 53, .06) ) !important; } .hero--refined .hero-scene--persistent { padding: 2.8rem 16px 9rem; } .hero--refined .hero-scene__content--brand { width: min(100%, 520px); padding: 1.2rem .55rem 1.4rem; } .hero--refined .hero-scene__content--brand::before { inset: -1.35rem -.55rem; background: radial-gradient( ellipse at center, rgba(255, 255, 255, .72), rgba(255, 255, 255, .35) 57%, transparent 80% ); } } @media (max-width: 420px) { .hero--refined .hero__slide--gift .hero__img { object-position: 70% 50% !important; } .hero--refined .hero__slide--warmth .hero__img { object-position: 36% 50% !important; } }