/* ================================================================= reclaire — style.css design-tokens.md の値だけを使う。ハードコードの色・フォントは置かない。 ================================================================= */ /* ---------- Tokens ---------- */ :root { /* color */ --paper: #FBFAF8; --paper-pure: #FFFFFF; --paper-dim: #F3F1EC; --ink: #171614; --ink-soft: #6E6A63; --line: #E4E0D8; --ink-deep: #100F0D; --paper-on-deep: #EDEBE6; --accent: #7E6670; /* type */ --ff-display: "Cormorant Garamond", "Noto Serif JP", serif; --ff-label: "Jost", "Noto Sans JP", sans-serif; --ff-serif: "Noto Serif JP", serif; --ff-sans: "Noto Sans JP", sans-serif; --fs-hero: clamp(2.6rem, 7vw, 6.5rem); --fs-section: clamp(1.7rem, 4vw, 3rem); --fs-lead: clamp(1.05rem, 2vw, 1.3rem); --fs-body: 1rem; --fs-small: 0.8rem; /* spacing (8px base) */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; --space-6: 96px; --space-7: 140px; --space-8: 200px; /* layout */ --measure: 1180px; --measure-text: 640px; --gutter: clamp(20px, 5vw, 64px); /* motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-1: 0.6s; --dur-2: 1.0s; --stagger: 0.08s; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ff-sans); font-size: var(--fs-body); font-weight: 300; line-height: 2.0; letter-spacing: 0.04em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; word-break: keep-all; overflow-wrap: anywhere; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* ---------- Utilities ---------- */ .container { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } .measure { max-width: var(--measure-text); } .eyebrow { font-family: var(--ff-label); font-size: var(--fs-small); font-weight: 400; text-transform: uppercase; letter-spacing: 0.34em; color: var(--ink-soft); } .section-head { margin-bottom: var(--space-6); } .section-title { font-family: var(--ff-label); font-weight: 300; font-size: var(--fs-section); text-transform: uppercase; letter-spacing: 0.34em; line-height: 1.1; margin-top: var(--space-2); } .section-jp { font-family: var(--ff-serif); font-weight: 300; letter-spacing: 0.12em; color: var(--ink-soft); margin-top: var(--space-2); } .section-no { font-family: var(--ff-display); font-size: var(--fs-lead); color: var(--ink-soft); letter-spacing: 0.1em; } .section { padding-block: clamp(var(--space-6), 14vw, var(--space-8)); } .section--dim { background: var(--paper-dim); } /* ---- scroll motion (GSAP) ---- .has-motion は のインライン script が付与する。 JSが無効/縮約(reduced motion)時は付かない＝[data-reveal] は常に表示され、内容が消えない。 */ .has-motion [data-reveal] { opacity: 0; } .has-motion [data-reveal="image"] { opacity: 1; clip-path: inset(0 0 100% 0); } .has-motion [data-reveal="image"] img { transform: scale(1.12); } .line-mask { display: block; overflow: hidden; } .line-mask .line, [data-reveal] .line { display: block; } /* Lenis（慣性スクロール）用 */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ================================================================= Preloader ================================================================= */ .preloader { position: fixed; inset: 0; z-index: 200; background: var(--paper); display: grid; place-items: center; transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease); } .preloader.is-done { opacity: 0; visibility: hidden; } .preloader__mark { font-family: var(--ff-display); font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: 0.3em; font-weight: 300; overflow: hidden; } .preloader__mark span { display: inline-block; transform: translateY(105%); animation: rise 0.9s var(--ease) forwards; } @keyframes rise { to { transform: none; } } .preloader__bar { margin-top: var(--space-3); height: 1px; width: min(220px, 50vw); background: var(--line); position: relative; overflow: hidden; } .preloader__bar::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--ink); animation: load 1.4s var(--ease) forwards; } @keyframes load { to { transform: scaleX(1); } } /* ================================================================= Header ================================================================= */ .header { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--gutter); color: var(--paper-on-deep); /* ヒーロー上では明色 */ transition: background var(--dur-1) var(--ease), padding var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); border-bottom: 1px solid transparent; } /* 上部スクリム：背景画像が明暗どちらでもナビを読めるように */ .header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--ink-deep) 42%, transparent), transparent); transition: opacity var(--dur-1) var(--ease); } .header.is-scrolled { color: var(--ink); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom-color: var(--line); padding-block: var(--space-2); } .header.is-scrolled::before { opacity: 0; } /* ---- ブランド（ロゴマーク＋ワードマーク）---- */ .brand { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--ff-display); font-size: 1.55rem; font-weight: 500; letter-spacing: 0.24em; text-transform: lowercase; line-height: 1; } .brand__mark { width: 34px; height: 34px; flex: none; transition: transform var(--dur-2) var(--ease); } .brand:hover .brand__mark { transform: rotate(360deg); } .brand__name { display: inline-block; } .nav { display: flex; align-items: center; gap: var(--space-3); } .nav__list { display: flex; align-items: center; gap: 2px; } /* ---- ナビ：millor風に、ホバーで丸枠（ピル）がふわっと出る ---- */ .nav__link { position: relative; font-family: var(--ff-label); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.2em; padding: 9px 18px; border-radius: 999px; transition: color var(--dur-1) var(--ease); } .nav__link::after { content: ""; position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 999px; opacity: 0; transform: scale(0.76); transform-origin: center; pointer-events: none; transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .nav__link:hover::after, .nav__link.is-active::after { opacity: 1; transform: scale(1); } .nav__link.is-active { color: var(--accent); } /* ---- RESERVE：ヘアライン枠＋左からの一方向ワイプ。控えめで上品に ---- */ .btn-book { position: relative; font-family: var(--ff-label); font-size: 0.72rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.26em; text-indent: 0.26em; white-space: nowrap; border: 1px solid color-mix(in srgb, currentColor 50%, transparent); border-radius: 999px; padding: 12px 34px; background-image: linear-gradient(var(--paper-on-deep), var(--paper-on-deep)); /* ヒーロー上＝明色フィル */ background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; /* 左から一方向に */ transition: background-size var(--dur-2) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .btn-book:hover { background-size: 100% 100%; color: var(--ink-deep); border-color: var(--paper-on-deep); transform: translateY(-1px); } .header.is-scrolled .btn-book { background-image: linear-gradient(var(--ink), var(--ink)); } /* スクロール後＝墨フィル */ .header.is-scrolled .btn-book:hover { color: var(--paper); border-color: var(--ink); } /* デスクトップでは右側(.is-desktop)の1つだけ表示。ナビ内ボタンはモバイルメニュー専用 */ .nav > .btn-book { display: none; } /* ---- SNS：millor風に、ホバーで円枠＋アイコン一回転 ---- */ .nav__sns { display: flex; align-items: center; gap: 4px; } .nav__sns a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: currentColor; opacity: .78; transition: transform .7s var(--ease), opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .nav__sns a::before { content: ""; position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; opacity: 0; transform: scale(0.6); transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .nav__sns a svg { position: relative; width: 17px; height: 17px; display: block; fill: currentColor; } .nav__sns a:hover { opacity: 1; color: var(--accent); transform: rotate(360deg); } .nav__sns a:hover::before { opacity: .5; transform: scale(1); } /* hamburger */ .nav-toggle { display: none; width: 28px; height: 16px; position: relative; z-index: 110; } .nav-toggle span { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease); } .nav-toggle span:nth-child(1) { top: 0; } .nav-toggle span:nth-child(2) { top: 50%; } .nav-toggle span:nth-child(3) { bottom: 0; } /* ================================================================= Hero ================================================================= */ .hero { position: relative; min-height: 100vh; display: grid; align-items: end; overflow: hidden; } .hero__media { position: absolute; inset: -8% 0; } /* パララックス用に上下を少し拡張 */ .hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.02); } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--ink-deep) 38%, transparent), transparent 55%); } .hero__inner { position: relative; padding: var(--gutter); padding-bottom: clamp(var(--space-5), 10vw, var(--space-7)); width: 100%; color: var(--paper-on-deep); } .hero__title { font-family: var(--ff-display); font-weight: 300; line-height: 1.04; font-size: var(--fs-hero); letter-spacing: 0.04em; text-transform: uppercase; } .hero__sub { font-family: var(--ff-serif); font-weight: 300; font-size: var(--fs-lead); letter-spacing: 0.3em; margin-top: var(--space-3); } .scroll-cue { position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: var(--paper-on-deep); font-family: var(--ff-label); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.34em; } .scroll-cue__line { width: 1px; height: 56px; background: currentColor; opacity: .5; transform-origin: top; animation: cue 2.2s var(--ease) infinite; } @keyframes cue { 0% { transform: scaleY(0); } 40% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ================================================================= Intro / Concept lead ================================================================= */ .intro__lead { font-family: var(--ff-serif); font-weight: 300; font-size: var(--fs-lead); line-height: 2.2; letter-spacing: 0.08em; } /* リード文の「上」に配置（ブラウザ版）。スマホ版では非表示にしヒーロー側に出す */ .intro__spaced { display: block; margin-bottom: var(--space-4); font-size: clamp(1.2rem, 3vw, 2rem); letter-spacing: 0.05em; } /* ================================================================= LOOKBOOK (主役 / 横スクロール) ================================================================= */ .lookbook { overflow: hidden; } .lookbook__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; } .lookbook__tabs { display: flex; gap: var(--space-3); } .lookbook__tab { font-family: var(--ff-label); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft); padding-bottom: 6px; border-bottom: 1px solid transparent; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .lookbook__tab.is-active { color: var(--ink); border-bottom-color: var(--accent); } .gallery { display: flex; gap: clamp(var(--space-3), 3vw, var(--space-5)); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--space-5) var(--gutter) var(--space-4); margin-top: var(--space-4); -ms-overflow-style: none; scrollbar-width: none; cursor: grab; } .gallery::-webkit-scrollbar { display: none; } .gallery.is-dragging { cursor: grabbing; scroll-snap-type: none; } .gallery__group { display: none; } .gallery__group.is-active { display: contents; } .style-card { flex: 0 0 min(74vw, 360px); scroll-snap-align: center; } .style-card__media { overflow: hidden; aspect-ratio: 3 / 4; background: var(--paper-dim); } .style-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.02); transition: transform var(--dur-2) var(--ease); } .style-card:hover .style-card__media img { transform: scale(1.04); } .style-card__no { font-family: var(--ff-display); font-size: var(--fs-lead); color: var(--ink-soft); margin-top: var(--space-2); } .style-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); } .style-card__tags span { font-family: var(--ff-label); font-size: var(--fs-small); letter-spacing: 0.08em; color: var(--ink-soft); } .lookbook__hint { font-family: var(--ff-label); font-size: var(--fs-small); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); text-align: center; } /* ================================================================= MENU ================================================================= */ .menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5) var(--space-4); } .menu-item { padding-top: var(--space-3); border-top: 1px solid var(--line); } .menu-item__en { font-family: var(--ff-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 400; letter-spacing: 0.04em; } .menu-item__jp { font-family: var(--ff-serif); letter-spacing: 0.16em; color: var(--ink-soft); margin-top: 2px; } .menu-item__desc { margin-top: var(--space-2); font-size: 0.92rem; color: var(--ink-soft); line-height: 1.95; } .menu-item__price { margin-top: var(--space-2); font-family: var(--ff-label); font-size: var(--fs-small); letter-spacing: 0.1em; } /* ================================================================= CONCEPT (非対称) ================================================================= */ .concept__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(var(--space-4), 6vw, var(--space-7)); align-items: center; } .concept__media { aspect-ratio: 4 / 5; overflow: hidden; } .concept__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.02); } .concept__body p { margin-top: var(--space-3); color: var(--ink-soft); } .concept__poem { font-family: var(--ff-serif); font-weight: 300; font-size: var(--fs-lead); line-height: 2.4; letter-spacing: 0.1em; color: var(--ink); } .link-more { display: inline-block; margin-top: var(--space-4); font-family: var(--ff-label); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.22em; border-bottom: 1px solid var(--ink); padding-bottom: 4px; } .link-more:hover { color: var(--accent); border-color: var(--accent); } /* ================================================================= RECRUIT (フルブリード) ================================================================= */ .recruit { position: relative; min-height: 70vh; display: grid; place-items: center; text-align: center; color: var(--paper-on-deep); overflow: hidden; } .recruit__media { position: absolute; inset: -8% 0; } /* パララックス用 */ .recruit__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.02) brightness(.7); } .recruit__inner { position: relative; padding: var(--gutter); } .recruit__title { font-family: var(--ff-display); font-weight: 300; font-size: var(--fs-section); text-transform: uppercase; letter-spacing: 0.3em; } .recruit__text { margin-top: var(--space-3); } .recruit .link-more { color: var(--paper-on-deep); border-color: var(--paper-on-deep); } /* ================================================================= Instagram grid ================================================================= */ .ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; } .ig-grid a { aspect-ratio: 1; overflow: hidden; } .ig-grid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.02); transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease); } .ig-grid a:hover img { transform: scale(1.06); opacity: .85; } .ig-cta { text-align: center; margin-top: var(--space-4); } /* ================================================================= Footer (黒地) ================================================================= */ .footer { background: var(--ink-deep); color: var(--paper-on-deep); padding-block: var(--space-7); } .footer__brand { display: inline-flex; align-items: center; gap: 0.32em; font-family: var(--ff-display); font-size: clamp(2.4rem, 8vw, 5rem); letter-spacing: 0.2em; text-transform: lowercase; font-weight: 400; line-height: 1; } .footer__brand .brand__mark { width: 0.82em; height: 0.82em; flex: none; transition: transform var(--dur-2) var(--ease); } .footer__brand:hover .brand__mark { transform: rotate(360deg); } .footer__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(var(--space-4), 5vw, var(--space-7)); margin-top: var(--space-6); align-items: start; } .info-table { width: 100%; border-collapse: collapse; } .info-table th, .info-table td { text-align: left; padding: var(--space-3) 0; border-bottom: 1px solid color-mix(in srgb, var(--paper-on-deep) 20%, transparent); vertical-align: top; } .info-table th { font-family: var(--ff-label); font-weight: 400; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.22em; color: color-mix(in srgb, var(--paper-on-deep) 70%, transparent); width: 34%; } .info-table td { letter-spacing: 0.06em; } .footer__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); } /* 地図リンク：ヘッダーRESERVE と揃えたピル＋中央フィル */ .footer__map-link { position: relative; font-family: var(--ff-label); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.2em; white-space: nowrap; border: 1px solid currentColor; border-radius: 999px; padding: 12px 26px; background-image: linear-gradient(var(--paper-on-deep), var(--paper-on-deep)); background-repeat: no-repeat; background-position: center; background-size: 0% 100%; transition: background-size var(--dur-2) var(--ease), color var(--dur-1) var(--ease); } .footer__map-link:hover { background-size: 100% 100%; color: var(--ink-deep); } /* SNS：ヘッダー同様に 円枠＋アイコン一回転 */ .footer__sns { display: flex; align-items: center; gap: 4px; } .footer__sns a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: currentColor; opacity: .78; transition: transform .7s var(--ease), opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .footer__sns a::before { content: ""; position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; opacity: 0; transform: scale(0.6); transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .footer__sns a svg { position: relative; width: 17px; height: 17px; display: block; fill: currentColor; } .footer__sns a:hover { opacity: 1; color: var(--accent); transform: rotate(360deg); } .footer__sns a:hover::before { opacity: .5; transform: scale(1); } /* 埋め込みマップ（天王寺）。編集的にモノトーン化し、ホバーで色が戻る */ .footer__map { position: relative; border: 1px solid color-mix(in srgb, var(--paper-on-deep) 18%, transparent); border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; min-height: 240px; } .footer__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.05) brightness(.92); transition: filter var(--dur-2) var(--ease); } .footer__map:hover iframe { filter: none; } .footer__copy { margin-top: var(--space-6); font-family: var(--ff-label); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--paper-on-deep) 55%, transparent); } /* ================================================================= Responsive ================================================================= */ @media (max-width: 1200px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .nav__list, .nav__sns, .btn-book.is-desktop { display: none; } .nav-toggle { display: block; } /* mobile full overlay nav */ .nav { position: fixed; inset: 0; background: var(--paper); flex-direction: column; justify-content: safe center; gap: var(--space-4); transform: translateY(-100%); transition: transform var(--dur-2) var(--ease); padding: calc(var(--gutter) + var(--space-5)) var(--gutter) var(--gutter); overflow-y: auto; /* 画面高を超える内容を枠内にクリップ＝閉時に下部(RECRUIT以下)が漏れない */ } body.nav-open .nav { transform: none; } body.nav-open .header.is-scrolled { backdrop-filter: none; } body.nav-open .header { color: var(--ink); } /* 白背景オーバーレイ上は墨色に */ body.nav-open .header::before { opacity: 0; } body.nav-open { overflow: hidden; } .nav__list { display: flex; flex-direction: column; gap: var(--space-4); text-align: center; } .nav__link { font-size: 1rem; } .nav__sns { display: flex; justify-content: center; } .nav .btn-book { display: inline-block; } body.nav-open .nav-toggle span:nth-child(1) { top: 50%; transform: rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { bottom: auto; top: 50%; transform: rotate(-45deg); } .concept__grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: var(--space-5); } .ig-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .menu-grid { grid-template-columns: 1fr; } .lookbook__head { align-items: flex-start; } .style-card { flex-basis: min(80vw, 320px); } /* ---- Hero：スマホのみ。明るさ・配置・画像バランスを調整 ---- */ /* svh でツールバー裏への回り込みを防ぎ、テキストの見切れを解消 */ .hero { min-height: 86svh; } /* 縦長クロップによる“ドアップ”を緩和し、主役が入る位置に寄せる */ .hero__media img { object-position: center 30%; filter: saturate(.95) contrast(1.0) brightness(1.08); /* ブラウザ版より暗い印象を補正 */ } /* 暗いグラデーション帯を軽く（文字の可読性は維持） */ .hero__media::after { background: linear-gradient(to top, color-mix(in srgb, var(--ink-deep) 30%, transparent), transparent 50%); } /* テキストを持ち上げ、SCROLLキューとの間隔を確保（被り・近接を回避） */ .hero__inner { padding-bottom: var(--space-7); } .hero__sub { letter-spacing: 0.18em; } /* 1行に収まりやすくして見切れ防止 */ /* SCROLLキューの線を短くし、サブコピーとの余白をさらに確保 */ .scroll-cue { bottom: var(--space-2); } .scroll-cue__line { height: 40px; } } /* ================================================================= UI brush-up（デザインは保ったまま、質感・操作感のみ向上） ================================================================= */ ::selection { background: var(--ink); color: var(--paper); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } main, section[id] { scroll-margin-top: 92px; } /* 見出し・リードの改行を美しく整える */ .section-title, .intro__lead, .concept__poem, .recruit__title, .footer__brand { text-wrap: balance; } /* LOOKBOOK タブ：下線をスライドさせる */ .lookbook__tab { position: relative; border-bottom: none; } .lookbook__tab::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-1) var(--ease); } .lookbook__tab:hover { color: var(--ink); } .lookbook__tab.is-active::after { transform: scaleX(1); } /* スタイルカード：ほんの少し浮かせ、ズームをゆっくり上質に */ .style-card { transition: transform var(--dur-2) var(--ease); } .style-card:hover { transform: translateY(-6px); } .style-card__media img { transition: transform 1.2s var(--ease); } .style-card:hover .style-card__media img { transform: scale(1.05); } /* MENU：行ホバーで上罫線を引き締める */ .menu-item { transition: border-color var(--dur-1) var(--ease); } .menu-item:hover { border-top-color: var(--ink); } /* link-more：下線をアニメーション */ .link-more { position: relative; border-bottom: none; padding-bottom: 5px; } .link-more::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: left; transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .link-more:hover { color: var(--accent); } .link-more:hover::after { background: var(--accent); } /* フッターのリンク下線をスライド */ /* Instagram：ホバー時に極薄のスクリムで奥行き */ .ig-grid a { position: relative; } .ig-grid a::after { content: ""; position: absolute; inset: 0; background: var(--ink-deep); opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease); } .ig-grid a:hover::after { opacity: .08; } /* 方針：OSの「アニメーション抑制(reduced motion)」設定に関係なく全員に演出を表示する。 そのため prefers-reduced-motion 用の無効化ブロックは意図的に置かない（millor.jp と同様の挙動）。 ※ ライブラリ不達/JS失敗時は has-motion 解除のフェイルセーフで内容は必ず表示される。 */