/* ================================================================ KYUSEI — design tokens ================================================================ */ :root { /* navy palettes (toggle by data-navy on ) */ --navy-deep: #0A1B3D; --navy-mid: #143A6B; --navy-light: #1F4E8C; --ink: #0A1B3D; --ink-soft: #3a4a6b; --ink-mute: #6c7894; --paper: #FDFDFB; --paper-warm: #F5F3EC; --paper-cool: #EEF2F8; --line: #DDE3EE; --accent-cyan: #4DA8FF; --accent-silver: #9FB3CC; --accent-lime: #BFE05A; --accent-orange: #FF8A3D; /* applied tokens — overwritten below per data attribute */ --navy: var(--navy-deep); --accent: var(--accent-cyan); --serif: "Shippori Mincho", "Times New Roman", serif; --sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif; --jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; --container: 1320px; --pad-x: clamp(20px, 4vw, 64px); --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,.84,.44,1); } /* Navy variations */ body[data-navy="deep"] { --navy: var(--navy-deep); } body[data-navy="mid"] { --navy: var(--navy-mid); } body[data-navy="light"] { --navy: var(--navy-light); } body[data-navy="gradient"] { --navy: var(--navy-deep); } /* Accent variations */ body[data-accent="cyan"] { --accent: var(--accent-cyan); } body[data-accent="silver"] { --accent: var(--accent-silver); } body[data-accent="lime"] { --accent: var(--accent-lime); } body[data-accent="orange"] { --accent: var(--accent-orange); } body[data-accent="none"] { --accent: var(--ink); } /* ================================================================ RESET / BASE ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; /* 横スクロール禁止 */ } body { margin: 0; overflow-x: hidden; /* 100vw 要素等によるはみ出し対策 */ font-family: var(--jp); font-feature-settings: "palt"; color: var(--ink); background: var(--paper); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; margin: 0; } button { font: inherit; cursor: pointer; } ::selection { background: var(--navy); color: white; } /* shared section */ .section { position: relative; padding: clamp(80px, 12vw, 160px) var(--pad-x); max-width: var(--container); margin: 0 auto; } .section-head { margin-bottom: clamp(48px, 6vw, 96px); } .section-head.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .section-label { display: inline-flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; color: var(--ink-mute); margin-bottom: 28px; text-transform: uppercase; } .section-label .num { font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 600; } .section-label .bar { width: 36px; height: 1px; background: var(--ink-mute); display: inline-block; } .section-label .en { font-family: var(--serif); font-style: italic; font-size: 16px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--navy); } .section-title { font-family: var(--jp); font-weight: 700; font-size: clamp(28px, 3.8vw, 56px); line-height: 1.2; letter-spacing: -0.02em; color: var(--navy); margin: 0; text-wrap: balance; } .section-title.small { font-size: clamp(22px, 2.6vw, 36px); } .section-title.oneline span { display: inline; } .section-title span { display: block; } .section-title em { font-style: normal; position: relative; color: inherit; } .section-title em::after { content: ""; position: absolute; left: -0.05em; right: -0.05em; bottom: 0.08em; height: 0.36em; background: var(--accent); opacity: 0.32; z-index: -1; border-radius: 4px; } .section-desc { max-width: 640px; margin-top: 24px; font-size: 16px; color: var(--ink-soft); line-height: 1.85; } .dark-head .section-label .num, .dark-head .section-label .en, .dark-head .section-title { color: white; } .dark-head .section-label { color: rgba(255,255,255,0.7); } .dark-head .section-label .bar { background: rgba(255,255,255,0.5); } .dark-head .section-desc { color: rgba(255,255,255,0.75); } .text-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--navy); padding-bottom: 4px; border-bottom: 1px solid currentColor; transition: gap 0.3s var(--ease); } .text-link svg { width: 16px; height: 16px; } .text-link:hover { gap: 16px; } /* ================================================================ HEADER ================================================================ */ .site-header { position: fixed; inset: 0 0 auto 0; height: 76px; z-index: 100; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 0 var(--pad-x); color: white; pointer-events: none; transition: background 0.3s var(--ease), color 0.3s var(--ease), backdrop-filter 0.3s var(--ease); } .site-header.scrolled { background: rgba(255,255,255,0.92); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); color: var(--ink); border-bottom: 1px solid var(--line); } .site-header > * { pointer-events: auto; } .logo { display: flex; align-items: center; height: 48px; } .logo img { height: 100%; width: auto; display: block; transition: filter 0.3s var(--ease); } /* Over hero (white text mode), invert the logo to white. When scrolled, show original. */ .site-header:not(.scrolled) .logo img { filter: brightness(0) invert(1); } .primary-nav { display: flex; justify-content: center; gap: 36px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; } .primary-nav a { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 4px; position: relative; transition: opacity 0.2s; } .primary-nav a .num { font-size: 9px; letter-spacing: 0.1em; opacity: 0.55; font-variant-numeric: tabular-nums; } .primary-nav a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px; background: currentColor; transition: width 0.3s var(--ease), left 0.3s var(--ease); } .primary-nav a:hover::after { width: 100%; left: 0; } /* Current-page indicator */ .primary-nav a.active { color: var(--accent); } .primary-nav a.active .num { opacity: 1; color: var(--accent); } .primary-nav a.active::after { width: 100%; left: 0; background: var(--accent); height: 2px; } .primary-nav a.active::before { content: ""; position: absolute; left: 50%; top: -4px; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; transform: translateX(-50%); } .cta-pill { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; padding: 10px 18px; border: 1px solid currentColor; border-radius: 100px; transition: gap 0.3s var(--ease), padding-right 0.3s var(--ease); } .cta-pill svg { width: 14px; height: 14px; } .cta-pill:hover { gap: 14px; padding-right: 22px; } .cta-pill.active { background: var(--accent); border-color: var(--accent); color: var(--navy); } @media (max-width: 900px) { .primary-nav { display: none; } } /* ================================================================ BACK-TO-TOP — floating button ================================================================ */ .back-to-top { position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 90; width: 56px; height: 56px; display: grid; place-items: center; background: var(--navy); color: white; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 50%; cursor: pointer; box-shadow: 0 12px 28px -8px rgba(10, 27, 61, 0.4); opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.3s var(--ease); } .back-to-top svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); } .back-to-top .lbl { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 0.2em; color: var(--ink-mute); white-space: nowrap; opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; } .back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .back-to-top:hover { background: var(--accent); color: var(--navy); } .back-to-top:hover svg { transform: translateY(-3px); } .back-to-top:hover .lbl { opacity: 1; } .back-to-top:active { transform: translateY(0) scale(0.95); } /* ================================================================ HERO ================================================================ */ .hero { position: relative; min-height: 100vh; background: var(--navy); color: white; overflow: hidden; padding: 76px var(--pad-x) 0; display: flex; flex-direction: column; } body[data-navy="gradient"] .hero { background: radial-gradient(ellipse at 80% 20%, rgba(77,168,255,0.25), transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(77,168,255,0.18), transparent 50%), linear-gradient(160deg, #0A1B3D 0%, #143A6B 60%, #1F4E8C 100%); } .hero-bg { position: absolute; inset: 0; color: white; z-index: 0; pointer-events: none; } /* ── 3-slide cross-fade slider ── */ .hero-slider { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .hero-slider-track { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; animation: heroFade 21s ease-in-out infinite; } .hero-slide:nth-child(1) { animation-delay: 0s; } .hero-slide:nth-child(2) { animation-delay: -14s; } .hero-slide:nth-child(3) { animation-delay: -7s; } .hero-slider:hover .hero-slide { animation-play-state: paused; } @keyframes heroFade { 0% { opacity: 0; transform: scale(1.08); } 8% { opacity: 1; } 33% { opacity: 1; transform: scale(1.0); } 41% { opacity: 0; transform: scale(1.0); } 100% { opacity: 0; transform: scale(1.08); } } .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.25) 100%); pointer-events: none; z-index: 2; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in oklab, var(--navy) 92%, transparent) 0%, color-mix(in oklab, var(--navy) 72%, transparent) 55%, color-mix(in oklab, var(--navy) 55%, transparent) 100%); z-index: 1; pointer-events: none; } .hero-grid { width: 100%; height: 100%; position: relative; z-index: 2; } body[data-hero="static"] .hero-bg { opacity: 0.5; } body[data-hero="static"] .hero-lines { display: none; } .hero-lines { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .hero-lines span { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--accent), transparent); opacity: 0.5; animation: lineDrift 8s var(--ease) infinite; } .hero-lines span:nth-child(1) { left: 12%; animation-delay: 0s; } .hero-lines span:nth-child(2) { left: 32%; animation-delay: 1.6s; } .hero-lines span:nth-child(3) { left: 54%; animation-delay: 3.2s; } .hero-lines span:nth-child(4) { left: 72%; animation-delay: 4.8s; } .hero-lines span:nth-child(5) { left: 88%; animation-delay: 6.4s; } @keyframes lineDrift { 0% { transform: translateY(-100%); opacity: 0; } 20% { opacity: 0.7; } 80% { opacity: 0.7; } 100% { transform: translateY(100%); opacity: 0; } } /* ── Slider controls (positioned over hero) ── */ .hero-slider-ui { position: absolute; right: var(--pad-x); bottom: clamp(80px, 12vh, 140px); z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; color: white; } .slider-count { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; } .slider-count .cur { color: white; font-size: 18px; font-weight: 700; } .slider-count .sep { opacity: 0.4; } .slider-count .tot { opacity: 0.6; } .slider-dots { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; } .slider-dots .dot { appearance: none; background: transparent; border: none; padding: 4px 0; cursor: pointer; display: flex; align-items: center; gap: 12px; } .slider-dots .dot .track { position: relative; display: block; width: 40px; height: 2px; background: rgba(255,255,255,0.2); overflow: hidden; transition: width 0.5s var(--ease); } .slider-dots .dot .fill { position: absolute; inset: 0; width: 0; background: var(--accent); } .slider-dots .dot.active .track { width: 64px; } .slider-dots .dot.active .fill { animation: dotFill 6s linear forwards; } .hero-slider-ui.is-paused .slider-dots .dot.active .fill { animation-play-state: paused; } @keyframes dotFill { from { width: 0%; } to { width: 100%; } } .slider-arrows { display: flex; gap: 8px; } .slider-arrows .arr { appearance: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: transparent; color: white; display: grid; place-items: center; cursor: pointer; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); } .slider-arrows .arr svg { width: 16px; height: 16px; } .slider-arrows .arr:hover { background: var(--accent); border-color: var(--accent); color: var(--navy); } .slider-arrows .arr:active { transform: scale(0.95); } @media (max-width: 720px) { .hero-slider-ui { bottom: 96px; gap: 14px; } .slider-arrows .arr { width: 36px; height: 36px; } .slider-dots .dot .track { width: 28px; } .slider-dots .dot.active .track { width: 44px; } } .hero-meta { position: relative; z-index: 2; display: flex; justify-content: space-between; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; opacity: 0.7; padding: 24px 0; } .hero-meta .meta-left { display: inline-flex; align-items: center; gap: 12px; } .hero-meta .meta-right { display: inline-flex; gap: 24px; } .hero-meta .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: pulse 2s var(--ease) infinite; box-shadow: 0 0 0 0 var(--accent); } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(77,168,255,0.5); } 50% { box-shadow: 0 0 0 10px rgba(77,168,255,0); } } .hero-content { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 32px; } .hero-eyebrow .bar { width: 40px; height: 1px; background: currentColor; } .hero-title { margin: 0; font-family: var(--jp); font-weight: 800; font-size: clamp(36px, 5.4vw, 88px); line-height: 1.15; letter-spacing: -0.03em; color: white; text-wrap: balance; } .hero-title .line { display: block; overflow: hidden; } .hero-title em { font-style: normal; position: relative; color: var(--accent); } .hero-title .line-1 { animation: lineUp 0.9s var(--ease-out) 0.1s both; } .hero-title .line-2 { animation: lineUp 0.9s var(--ease-out) 0.3s both; } @keyframes lineUp { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: translateY(0); } } .hero-sub { font-family: var(--jp); font-size: clamp(13px, 1.1vw, 16px); font-weight: 400; line-height: 1.9; color: rgba(255,255,255,0.78); max-width: 600px; margin-top: clamp(24px, 4vw, 56px); animation: lineUp 0.9s var(--ease-out) 0.5s both; } .hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 80px); animation: lineUp 0.9s var(--ease-out) 0.7s both; } .hero-cta { display: inline-flex; align-items: center; gap: 16px; color: white; } .hero-cta .circle { width: 72px; height: 72px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; display: grid; place-items: center; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); } .hero-cta .circle svg { width: 22px; height: 22px; transform: rotate(90deg); } .hero-cta:hover .circle { background: var(--accent); border-color: var(--accent); transform: scale(1.05); } .hero-cta-text { display: flex; flex-direction: column; gap: 4px; } .hero-cta-text .t1 { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; } .hero-cta-text .t2 { font-family: var(--jp); font-size: 11px; opacity: 0.6; letter-spacing: 0.08em; } .hero-stats { display: flex; gap: clamp(24px, 4vw, 64px); align-items: flex-end; } .hero-stats > div { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,0.2); } .hero-stats .num { font-family: var(--sans); font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: white; } .hero-stats .num .small { font-size: 0.6em; opacity: 0.8; } .hero-stats .num .unit { font-size: 0.4em; opacity: 0.7; margin-left: 4px; font-weight: 500; } .hero-stats .lbl { font-family: var(--jp); font-size: 11px; color: rgba(255,255,255,0.65); letter-spacing: 0.1em; } /* Marquee */ .marquee { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); overflow: hidden; padding: 18px 0; margin-top: clamp(40px, 6vw, 80px); width: 100vw; margin-left: calc(50% - 50vw); } .marquee-track { display: flex; gap: 36px; white-space: nowrap; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.85); animation: marquee 50s linear infinite; width: max-content; } .marquee-track .sep { color: var(--accent); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Hero: SP レスポンシブ（ベーススタイルより後に記述） ── */ @media (max-width: 720px) { /* 座標テキスト（装飾）を非表示 */ .hero-meta { display: none; } /* コンテンツの上余白を縮小 */ .hero-content { padding: 20px 0 0; } /* Eyebrow の下余白を縮小 */ .hero-eyebrow { margin-bottom: 20px; font-size: 11px; } /* タイトル：SP向けフォントサイズ */ .hero-title { font-size: clamp(26px, 7.5vw, 36px); letter-spacing: -0.01em; line-height: 1.2; } /* サブテキスト：
を非表示・自然な折り返しに */ .hero-sub br { display: none; } .hero-sub { font-size: 13px; line-height: 1.8; margin-top: 16px; } /* フッター：CTAとスタッツを縦積みに */ .hero-foot { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 28px; } /* スクロールCTAのサークル：小さく */ .hero-cta .circle { width: 52px; height: 52px; } .hero-cta { gap: 12px; } /* スタッツ：3つが横並びで収まるよう縮小 */ .hero-stats { gap: 14px; align-items: flex-end; } .hero-stats > div { padding-left: 10px; } .hero-stats .num { font-size: 20px; } .hero-stats .lbl { font-size: 10px; } } /* ================================================================ ABOUT ================================================================ */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 120px); align-items: center; } .about-copy { max-width: 540px; } .about-copy .lede { font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; line-height: 1.7; color: var(--navy); margin: 0 0 24px; } .about-copy p { font-size: 15px; color: var(--ink-soft); line-height: 1.9; margin: 0 0 20px; } .about-copy strong { color: var(--navy); font-weight: 700; background: linear-gradient(transparent 62%, color-mix(in oklab, var(--accent) 30%, transparent) 62%); } .about-visual { position: relative; aspect-ratio: 4 / 5; width: 100%; } .about-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .about-tag { position: absolute; bottom: 24px; left: -24px; background: var(--navy); color: white; padding: 14px 24px; display: flex; align-items: baseline; gap: 10px; font-family: var(--sans); z-index: 2; } .about-tag span { font-size: 11px; letter-spacing: 0.16em; opacity: 0.7; } .about-tag strong { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; } .about-deco { position: absolute; top: -36px; right: -36px; width: 120px; height: 120px; color: var(--navy); animation: rotate 30s linear infinite; } @keyframes rotate { to { transform: rotate(360deg); } } @media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } } /* ================================================================ BUSINESS GRID ================================================================ */ .biz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; } .biz-card { background: var(--paper); padding: 0; min-height: 460px; display: flex; flex-direction: column; position: relative; overflow: hidden; border: 1px solid var(--line); } .biz-img { display: block; width: 100%; aspect-ratio: 4 / 3; flex-shrink: 0; position: relative; z-index: 2; } .biz-body { padding: clamp(24px, 2.4vw, 36px); display: flex; flex-direction: column; flex: 1; position: relative; z-index: 1; background: var(--paper); transition: color 0.4s var(--ease); } /* Navy slide-up overlay, scoped to body area only (does not cover image) */ .biz-body::before { content: ""; position: absolute; inset: 0; background: var(--navy); transform: translateY(101%); transition: transform 0.6s var(--ease); z-index: 0; } .biz-body > * { position: relative; z-index: 1; transition: color 0.4s var(--ease); } .biz-card:hover .biz-body::before { transform: translateY(0); } .biz-card:hover .biz-body h3, .biz-card:hover .biz-body .biz-num, .biz-card:hover .biz-body .biz-en, .biz-card:hover .biz-body p, .biz-card:hover .biz-body .biz-more { color: white; } .biz-card:hover .biz-more svg path { stroke: var(--accent); } .biz-num { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; color: var(--ink-mute); margin-bottom: 4px; } .biz-en { font-family: var(--serif); font-style: italic; font-size: 14px; font-weight: 400; color: var(--accent); margin-bottom: clamp(28px, 3vw, 40px); letter-spacing: 0.02em; } .biz-card h3 { font-family: var(--jp); font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -0.01em; color: var(--navy); margin: 0 0 16px; line-height: 1.3; } .biz-card p { font-size: 13px; color: var(--ink-soft); line-height: 1.8; margin: 0 0 auto; flex: 1; } .biz-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); margin-top: 32px; } .biz-more svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); } .biz-card:hover .biz-more svg { transform: translateX(4px); } @media (max-width: 1100px) { .biz-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .biz-grid { grid-template-columns: 1fr; } } /* ================================================================ GLOBAL DARK-SECTION WEIGHT (applies to hero/products/contact/footer) ================================================================ */ /* "balanced" — default, slightly softer */ body[data-dark="balanced"] { --navy-deep: #122448; --navy-mid: #1B3868; --navy-light: #25538E; } /* "light" — much lighter, more breathable */ body[data-dark="light"] { --navy-deep: #2A446F; --navy-mid: #355589; --navy-light: #4670AC; } body[data-dark="light"] .hero-overlay { background: linear-gradient(90deg, color-mix(in oklab, var(--navy) 80%, transparent) 0%, color-mix(in oklab, var(--navy) 55%, transparent) 60%, color-mix(in oklab, var(--navy) 40%, transparent) 100%); } /* "heavy" — original deep palette (no overrides needed, but explicit for clarity) */ body[data-dark="heavy"] { --navy-deep: #0A1B3D; --navy-mid: #143A6B; --navy-light: #1F4E8C; } ================================================================ */ .products { background: var(--navy); color: white; max-width: 100%; padding-left: var(--pad-x); padding-right: var(--pad-x); padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); transition: background 0.6s var(--ease), color 0.6s var(--ease); } .products .section-head { margin-bottom: clamp(28px, 4vw, 48px); } .products .section-title { font-size: clamp(26px, 3vw, 40px); } /* Variation: white inverse */ body[data-products="light"] .products { background: var(--paper); color: var(--ink); } body[data-products="light"] .products .dark-head .section-label { color: var(--ink-mute); } body[data-products="light"] .products .dark-head .section-label .num, body[data-products="light"] .products .dark-head .section-label .en, body[data-products="light"] .products .dark-head .section-title { color: var(--navy); } body[data-products="light"] .products .dark-head .section-label .bar { background: var(--ink-mute); } body[data-products="light"] .products .dark-head .section-desc { color: var(--ink-soft); } body[data-products="light"] .products .cat-list { border-top-color: var(--line); } body[data-products="light"] .products .cat-list li { border-bottom-color: var(--line); } body[data-products="light"] .products .cat-jp { color: var(--navy); } body[data-products="light"] .products .cat-en { color: var(--ink-mute); } body[data-products="light"] .products .cat-foot { color: var(--ink-soft); } /* Variation: cool paper */ body[data-products="cool"] .products { background: var(--paper-cool); color: var(--ink); } body[data-products="cool"] .products .dark-head .section-label { color: var(--ink-mute); } body[data-products="cool"] .products .dark-head .section-label .num, body[data-products="cool"] .products .dark-head .section-label .en, body[data-products="cool"] .products .dark-head .section-title { color: var(--navy); } body[data-products="cool"] .products .dark-head .section-label .bar { background: var(--ink-mute); } body[data-products="cool"] .products .dark-head .section-desc { color: var(--ink-soft); } body[data-products="cool"] .products .cat-list { border-top-color: rgba(20,58,107,0.18); } body[data-products="cool"] .products .cat-list li { border-bottom-color: rgba(20,58,107,0.18); } body[data-products="cool"] .products .cat-jp { color: var(--navy); } body[data-products="cool"] .products .cat-en { color: var(--ink-mute); } body[data-products="cool"] .products .cat-foot { color: var(--ink-soft); } /* Variation: soft navy gradient (less heavy) */ body[data-products="soft"] .products { background: radial-gradient(ellipse at 20% 0%, rgba(77,168,255,0.08), transparent 50%), linear-gradient(180deg, #1B2F55 0%, #243F6C 100%); } /* Variation: pale tinted (very light blue-gray) */ body[data-products="pale"] .products { background: #EEF2F8; color: var(--ink); } body[data-products="pale"] .products .dark-head .section-label { color: var(--ink-mute); } body[data-products="pale"] .products .dark-head .section-label .num, body[data-products="pale"] .products .dark-head .section-label .en, body[data-products="pale"] .products .dark-head .section-title { color: var(--navy); } body[data-products="pale"] .products .dark-head .section-label .bar { background: var(--ink-mute); } body[data-products="pale"] .products .dark-head .section-desc { color: var(--ink-soft); } body[data-products="pale"] .products .cat-list { border-top-color: rgba(20,58,107,0.15); } body[data-products="pale"] .products .cat-list li { border-bottom-color: rgba(20,58,107,0.15); } body[data-products="pale"] .products .cat-jp { color: var(--navy); } body[data-products="pale"] .products .cat-en { color: var(--ink-mute); } body[data-products="pale"] .products .cat-foot { color: var(--ink-soft); } .products .section-head { max-width: var(--container); margin-left: auto; margin-right: auto; } .products .cat-list, .products .cat-foot { max-width: var(--container); margin-left: auto; margin-right: auto; } .cat-list { border-top: 1px solid rgba(255,255,255,0.12); } .cat-list li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 20px; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,0.12); font-family: var(--jp); cursor: default; position: relative; } .cat-list li > * { position: relative; z-index: 1; } .cat-no { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; } .cat-jp { font-size: clamp(13px, 1vw, 15px); font-weight: 500; color: rgba(255,255,255,0.85); letter-spacing: 0.01em; } .cat-en { font-family: var(--serif); font-style: italic; font-size: 12px; color: rgba(255,255,255,0.4); letter-spacing: 0.02em; text-align: right; } .cat-foot { margin-top: 36px; padding-top: 0; font-size: 13px; color: rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .cat-foot .text-link { color: var(--accent); border-color: currentColor; } @media (max-width: 720px) { .cat-list li { grid-template-columns: 40px 1fr; gap: 16px; } .cat-en { display: none; } } /* ================================================================ SOLUTION ================================================================ */ .solution-inner { max-width: var(--container); margin: 0 auto; } .solution-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 6vw, 96px); align-items: flex-start; } .solution-copy { max-width: 460px; position: sticky; top: 100px; } .solution-copy .lede { font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; line-height: 1.7; color: var(--navy); margin: 0 0 24px; } .solution-copy p { font-size: 15px; color: var(--ink-soft); line-height: 1.9; } .solution-copy strong { color: var(--navy); font-weight: 700; background: linear-gradient(transparent 62%, color-mix(in oklab, var(--accent) 30%, transparent) 62%); } .solution-steps { display: flex; flex-direction: column; position: relative; } .solution-steps::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line); } .solution-steps li { position: relative; padding: 24px 0 32px 44px; border-bottom: 1px solid var(--line); } .solution-steps li:last-child { border-bottom: none; } .solution-steps li::before { content: ""; position: absolute; left: 0; top: 32px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); outline: 4px solid var(--paper); box-shadow: 0 0 0 1px var(--accent); } .step-no { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; color: var(--ink-mute); font-weight: 600; margin-bottom: 8px; } .solution-steps h4 { font-family: var(--jp); font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; color: var(--navy); margin: 0 0 10px; letter-spacing: -0.01em; } .solution-steps p { font-size: 14px; color: var(--ink-soft); line-height: 1.8; margin: 0; } @media (max-width: 880px) { .solution-grid { grid-template-columns: 1fr; } .solution-copy { position: static; } } /* ================================================================ RECRUIT — split layout ================================================================ */ .recruit { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 100%; padding: 0; background: var(--paper-cool); } .recruit-visual { position: relative; background: var(--navy); min-height: 640px; overflow: hidden; } .recruit-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7) saturate(0.7); } .recruit-stripe { position: absolute; bottom: 40px; left: 0; right: 0; padding: 16px 0; background: var(--accent); color: var(--navy); overflow: hidden; transform: rotate(-3deg); width: 110%; margin-left: -5%; } .stripe-track { display: flex; gap: 36px; white-space: nowrap; font-family: var(--sans); font-size: 18px; font-weight: 800; letter-spacing: 0.1em; animation: marquee 22s linear infinite; width: max-content; } .recruit-content { padding: clamp(60px, 8vw, 120px) clamp(40px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; } .recruit-content .section-title { margin-bottom: 28px; } .recruit-content p { font-size: 16px; color: var(--ink-soft); line-height: 1.9; max-width: 460px; margin: 0 0 40px; } .ghost-cta { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 18px 32px; border: 1px solid var(--navy); border-radius: 100px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; color: var(--navy); transition: background 0.3s var(--ease), color 0.3s var(--ease), gap 0.3s var(--ease); } .ghost-cta svg { width: 16px; height: 16px; } .ghost-cta:hover { background: var(--navy); color: white; gap: 16px; } @media (max-width: 900px) { .recruit { grid-template-columns: 1fr; } .recruit-visual { min-height: 360px; } .recruit-content { padding-left: var(--pad-x); padding-right: var(--pad-x); padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); } } /* ================================================================ NEWS ================================================================ */ .news-list { border-top: 1px solid var(--line); } .news-list li { display: grid; grid-template-columns: 120px 100px 1fr auto; align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); transition: padding-left 0.3s var(--ease); cursor: pointer; } .news-list li:hover { padding-left: 16px; background: var(--paper-warm); } .news-list .date { font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; color: var(--ink-mute); font-variant-numeric: tabular-nums; } .news-list .tag { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); padding: 5px 12px; border: 1px solid var(--navy); border-radius: 100px; text-align: center; } .news-list .title { font-family: var(--jp); font-size: 15px; font-weight: 500; color: var(--ink); } .news-list .arr { width: 18px; height: 18px; color: var(--ink-mute); transition: transform 0.3s var(--ease), color 0.3s var(--ease); } .news-list li:hover .arr { transform: translateX(4px); color: var(--navy); } /* front-page.php のをグリッドに透過させる（デスクトップ） */ .news-list li > a.news-link { display: contents; color: inherit; text-decoration: none; } @media (max-width: 720px) { /* SP: li はブロックに戻し、自体を 2×2 グリッドコンテナにする */ .news-list li { display: block; } .news-list li > a.news-link { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; padding: 20px var(--pad-x); color: inherit; text-decoration: none; align-items: start; } /* direct-child 構造（single-news.php など）用 */ .news-list li:not(:has(> a.news-link)) { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; padding: 20px var(--pad-x); } .news-list .date { grid-column: 1; grid-row: 1; font-size: 11px; } .news-list .tag { grid-column: 2; grid-row: 1; font-size: 10px; align-self: center; } .news-list .title { grid-column: 1; grid-row: 2; } .news-list .arr { grid-column: 2; grid-row: 2; align-self: center; } } /* ================================================================ CONTACT CTA ================================================================ */ .contact-cta { background: var(--navy); color: white; max-width: 100%; position: relative; overflow: hidden; } .cta-bg { position: absolute; inset: 0; pointer-events: none; opacity: 0.6; } .cta-bg svg { width: 100%; height: 100%; } .cta-inner { position: relative; max-width: var(--container); margin: 0 auto; } .cta-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--accent); margin-bottom: 28px; } .cta-eyebrow .bar { width: 36px; height: 1px; background: currentColor; } .cta-title { font-family: var(--jp); font-weight: 700; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 36px; } .cta-title span { display: block; } .contact-cta p { font-size: 16px; color: rgba(255,255,255,0.78); line-height: 1.9; max-width: 600px; margin: 0 0 56px; } .cta-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 40px 0 0; border-top: 1px solid rgba(255,255,255,0.15); } .big-cta { display: inline-flex; align-items: center; gap: 20px; color: white; font-family: var(--jp); } .big-cta .circle { width: 88px; height: 88px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; display: grid; place-items: center; transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease); } .big-cta:hover .circle { background: var(--accent); border-color: var(--accent); transform: scale(1.08); } .big-cta .circle svg { width: 28px; height: 28px; } .big-cta .t { display: flex; flex-direction: column; gap: 6px; } .big-cta .t1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .big-cta .t2 { font-family: var(--serif); font-style: italic; font-size: 13px; opacity: 0.6; } .phone-cta { border-left: 1px solid rgba(255,255,255,0.15); padding-left: 48px; } .phone-lbl { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 8px; } .phone-num { display: block; font-family: var(--sans); font-size: clamp(32px, 3.5vw, 48px); font-weight: 700; letter-spacing: -0.01em; color: white; margin-bottom: 8px; font-variant-numeric: tabular-nums; } .phone-hours { font-size: 12px; color: rgba(255,255,255,0.5); } @media (max-width: 720px) { .cta-actions { grid-template-columns: 1fr; gap: 36px; } .phone-cta { border-left: none; border-top: 1px solid rgba(255,255,255,0.15); padding: 28px 0 0; } } /* ================================================================ FOOTER ================================================================ */ .site-footer { background: var(--paper); color: var(--ink); padding: 56px var(--pad-x) 0; } .foot-top { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 2fr 2fr 1.5fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); } .foot-brand { display: flex; align-items: center; gap: 14px; } .foot-logo { height: 56px; width: auto; display: block; } .foot-addr { font-family: var(--jp); font-size: 12px; line-height: 1.8; color: var(--ink-soft); } .foot-nav { display: flex; flex-direction: column; gap: 8px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: var(--ink); } .foot-nav a { transition: color 0.2s, padding-left 0.3s; } .foot-nav a:hover { color: var(--navy); padding-left: 6px; } /* Hide the giant KYUSEI text — keeps footer short */ .foot-mega { display: none; } /* Bottom strip: full-width navy bar with the copyright (keeps original color) */ .foot-base { max-width: 100%; margin: 0 calc(50% - 50vw); padding: 18px var(--pad-x); background: #050d22; color: rgba(255,255,255,0.5); position: relative; } .foot-copy { max-width: var(--container); margin: 0 auto; display: flex; justify-content: space-between; font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); flex-wrap: wrap; gap: 16px; } .foot-copy a:hover { color: white; } @media (max-width: 880px) { .foot-top { grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; } .site-header .logo-text { display: none; } } /* ================================================================ SUB-PAGE — page hero, breadcrumb, shared atoms ================================================================ */ .site-header.always-scrolled { background: rgba(255,255,255,0.92); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); color: var(--ink); border-bottom: 1px solid var(--line); } .site-header.always-scrolled .logo img { filter: none; } .page-hero { position: relative; min-height: 56vh; background: var(--navy); color: white; padding: 156px var(--pad-x) 80px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; } .page-hero .hero-bg { position: absolute; inset: 0; z-index: 0; color: white; pointer-events: none; } .page-hero .hero-bg svg { width: 100%; height: 100%; } .page-hero-inner { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: flex-end; } .breadcrumb { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 28px; } .breadcrumb a { transition: color 0.2s; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb .sep { opacity: 0.4; } .breadcrumb .now { color: white; } .page-hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--accent); margin-bottom: 18px; } .page-hero-eyebrow .bar { width: 36px; height: 1px; background: currentColor; } .page-title { font-family: var(--jp); font-weight: 800; font-size: clamp(32px, 4.8vw, 72px); line-height: 1.15; letter-spacing: -0.03em; color: white; margin: 0; } .page-lead { font-family: var(--jp); font-size: 14px; line-height: 1.9; color: rgba(255,255,255,0.78); max-width: 460px; margin-bottom: 8px; } /* ── page-hero SP レスポンシブ ── */ @media (max-width: 720px) { .page-hero { padding: 108px var(--pad-x) 48px; min-height: auto; } .page-hero-inner { grid-template-columns: 1fr; /* 1カラムに変更（タイトル上・テキスト下） */ gap: 24px; align-items: flex-start; } .page-title { font-size: clamp(26px, 7vw, 36px); } .page-lead { font-size: 13px; line-height: 1.85; max-width: 100%; margin-bottom: 0; } } .subsection-head { margin-bottom: 40px; } .subsection-label { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; } .subsection-label .bar { width: 28px; height: 1px; background: currentColor; } .subsection-label .en { font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: 0.02em; text-transform: none; color: var(--navy); } .subsection-title { font-family: var(--jp); font-weight: 700; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.3; letter-spacing: -0.02em; color: var(--navy); margin: 0; } /* Info table (会社概要) */ .info-table { width: 100%; border-collapse: collapse; font-family: var(--jp); } .info-table tr { border-bottom: 1px solid var(--line); } .info-table th, .info-table td { text-align: left; vertical-align: top; padding: 24px 16px; font-size: 14px; line-height: 1.8; } .info-table th { width: 220px; font-weight: 600; color: var(--navy); letter-spacing: 0.04em; font-family: var(--sans); font-size: 12px; text-transform: uppercase; padding-top: 28px; } .info-table td { color: var(--ink-soft); } @media (max-width: 720px) { .info-table th, .info-table td { display: block; padding: 12px 0; } .info-table th { padding-top: 18px; width: auto; } .info-table tr { padding-bottom: 12px; } } /* Timeline (歩み) */ .timeline { position: relative; padding-left: 32px; } .timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--line); } .timeline li { position: relative; padding: 0 0 36px 32px; } .timeline li:last-child { padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: -32px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: white; border: 1.5px solid var(--accent); outline: 4px solid var(--paper); } .timeline .year { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--ink-mute); margin-bottom: 4px; text-transform: uppercase; } .timeline .ev { font-family: var(--jp); font-size: 15px; color: var(--ink); line-height: 1.8; } /* Number-stacked list (キューセイができること) */ .num-list { display: flex; flex-direction: column; } .num-list li { display: grid; grid-template-columns: 80px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--line); align-items: flex-start; } .num-list li:last-child { border-bottom: 1px solid var(--line); } .num-list .no { font-family: var(--sans); font-size: 32px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .num-list h4 { font-family: var(--jp); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; color: var(--navy); margin: 0 0 8px; letter-spacing: -0.01em; } .num-list p { font-size: 14px; color: var(--ink-soft); line-height: 1.85; margin: 0; } @media (max-width: 600px) { .num-list li { grid-template-columns: 1fr; gap: 8px; } } /* Feature grid (キューセイが選ばれる理由) */ .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .feature-card { border: 1px solid var(--line); padding: 36px 32px 28px; display: flex; flex-direction: column; background: white; position: relative; overflow: hidden; transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease); } .feature-card::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.5s var(--ease); } .feature-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 24px 40px -24px rgba(20,58,107,0.18); } .feature-card:hover::before { width: 100%; } .feature-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .feature-icon { position: relative; width: 72px; height: 72px; display: grid; place-items: center; color: var(--navy); flex-shrink: 0; } .feature-icon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in oklab, var(--accent) 12%, transparent); transition: transform 0.5s var(--ease), background 0.4s var(--ease); } .feature-icon::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed color-mix(in oklab, var(--accent) 45%, transparent); opacity: 0; transition: opacity 0.4s var(--ease); } .feature-icon svg { width: 38px; height: 38px; position: relative; z-index: 1; transition: transform 0.5s var(--ease); } .feature-card:hover .feature-icon::before { transform: scale(1.08); background: color-mix(in oklab, var(--accent) 22%, transparent); } .feature-card:hover .feature-icon::after { opacity: 1; } .feature-card:hover .feature-icon svg { transform: rotate(-6deg) scale(1.05); } .feature-num { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: var(--ink-mute); border: 1px solid var(--line); padding: 4px 10px; border-radius: 100px; background: var(--paper); font-variant-numeric: tabular-nums; flex-shrink: 0; } .feature-card h4 { font-family: var(--jp); font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; color: var(--navy); margin: 0 0 14px; letter-spacing: -0.01em; line-height: 1.45; } .feature-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.85; margin: 0 0 24px; flex: 1; } .feature-stat { display: flex; align-items: baseline; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); } .feature-stat strong { font-family: var(--sans); font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .feature-stat span { font-family: var(--jp); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.1em; } @media (max-width: 720px) { .feature-grid { grid-template-columns: 1fr; } } /* Bullet list with check */ .bullet-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; } .bullet-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--ink); font-family: var(--jp); } .bullet-list li::before { content: ""; width: 16px; height: 16px; background: var(--accent); clip-path: polygon(20% 50%, 0 70%, 40% 100%, 100% 30%, 80% 10%, 40% 65%); flex-shrink: 0; margin-top: 3px; } @media (max-width: 600px) { .bullet-list { grid-template-columns: 1fr; } } /* Process steps (横3つ — エディトリアル風) */ .process-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); position: relative; } .process-card { position: relative; background: transparent; padding: 0; border: none; transition: transform 0.5s var(--ease); } .process-card:hover { transform: translateY(-4px); } .process-media { position: relative; aspect-ratio: 4 / 3; overflow: visible; margin-top: 32px; margin-bottom: 24px; } .process-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .process-media > img { border-radius: 0; } .process-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, color-mix(in oklab, var(--navy) 60%, transparent) 100%); pointer-events: none; opacity: 0; transition: opacity 0.5s var(--ease); } .process-card:hover .process-media::after { opacity: 1; } /* Giant editorial number overlapping the top of the photo */ .process-num { position: absolute; left: -12px; top: -36px; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(53px, 6vw, 88px); line-height: 1; letter-spacing: -0.04em; color: var(--navy); text-shadow: 0 2px 4px rgba(255,255,255,0.6), 0 8px 24px rgba(20,58,107,0.25); z-index: 3; pointer-events: none; transition: color 0.5s var(--ease); } .process-num::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: 14px; height: 8px; background: var(--accent); z-index: -1; opacity: 0.55; } .process-card:hover .process-num { color: var(--accent); } .process-body { padding: 0 4px; } .process-card .step-no { font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; color: var(--accent); font-weight: 700; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 12px; } .process-card .step-no::before { content: ""; width: 24px; height: 1px; background: var(--accent); display: inline-block; } .process-card h4 { font-family: var(--jp); font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.4; margin: 0 0 14px; } .process-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.95; margin: 0; } /* Arrow connector between cards (desktop only) */ .process-card:not(:last-child) .process-media::before { content: ""; position: absolute; top: 50%; right: calc(-1 * clamp(32px, 4vw, 64px)); width: clamp(32px, 4vw, 64px); height: 1px; background: linear-gradient(90deg, var(--line) 0%, var(--accent) 100%); transform: translateY(-50%); z-index: 1; } .process-card:not(:last-child) .process-body::before { content: ""; position: absolute; top: calc(50% - 80px); right: calc(-1 * clamp(32px, 4vw, 64px) / 2 - 5px); width: 10px; height: 10px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); transform: rotate(45deg); z-index: 1; } @media (max-width: 880px) { .process-row { grid-template-columns: 1fr; gap: 48px; } .process-num { font-size: 64px; top: -28px; } .process-card:not(:last-child) .process-media::before, .process-card:not(:last-child) .process-body::before { display: none; } } /* Quote / message */ .message-block { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: flex-start; } .message-photo { position: relative; aspect-ratio: 4 / 5; width: 100%; } .message-photo img { width: 100%; height: 100%; object-fit: cover; } .message-photo .sig { position: absolute; bottom: -24px; left: -24px; background: var(--navy); color: white; padding: 12px 20px; font-family: var(--jp); font-size: 13px; z-index: 2; } .message-photo .sig strong { font-size: 16px; font-weight: 700; margin-left: 6px; } .message-body { font-family: var(--jp); font-size: 15px; line-height: 2; color: var(--ink-soft); } .message-body p { margin: 0 0 1.4em; } .message-body p:last-child { margin-bottom: 0; } @media (max-width: 880px) { .message-block { grid-template-columns: 1fr; gap: 48px; } /* SP: 逆レイアウトブロックは写真上・テキスト下 */ .message-block--reverse .message-photo { order: -1; } .message-block--reverse .message-body { order: 1; } } /* 逆レイアウト：テキスト左・写真右 */ @media (min-width: 881px) { .message-block--reverse { grid-template-columns: 1fr 320px; } /* sig バッジを写真の右側に */ .message-block--reverse .message-photo .sig { left: auto; right: -24px; } } /* Form */ .form-grid { display: grid; gap: 28px; } .form-row { display: flex; align-items: flex-start; gap: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); } .form-row > label { flex: 0 0 200px; font-family: var(--jp); font-size: 14px; font-weight: 600; color: var(--navy); padding-top: 12px; display: flex; align-items: center; gap: 10px; } .form-row .req, .kyusei-form__label .req { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: white; background: var(--accent); padding: 3px 8px; border-radius: 2px; } .form-row .opt, .kyusei-form__label .opt { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-mute); border: 1px solid var(--line); padding: 3px 8px; border-radius: 2px; } .form-row input[type="text"], .form-row input[type="tel"], .form-row input[type="email"], .form-row textarea, .form-row select { width: 100%; font-family: var(--jp); font-size: 15px; padding: 12px 16px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 0; transition: border-color 0.2s, background 0.2s; } .form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: none; border-color: var(--navy); background: white; } .form-row textarea { min-height: 160px; resize: vertical; } .form-row .radio-row { display: flex; gap: 32px; padding-top: 14px; } .form-row .radio-row label { font-weight: 400; font-size: 14px; padding: 0; color: var(--ink); cursor: pointer; } .form-row .radio-row input { margin-right: 8px; } .form-submit { display: block; text-align: center; padding-top: 24px; } /* CF7 の wpcf7-form-control-wrap は block にして text-align を継承させる */ .form-submit .wpcf7-form-control-wrap { display: block; } .form-submit button { appearance: none; background: var(--navy); color: white; font-family: var(--jp); font-size: 15px; font-weight: 600; padding: 22px 80px; border: none; border-radius: 100px; cursor: pointer; display: inline-flex; align-items: center; gap: 14px; transition: background 0.3s var(--ease), gap 0.3s var(--ease); letter-spacing: 0.08em; } .form-submit button:hover { background: var(--accent); color: var(--navy); gap: 18px; } .form-submit button svg { width: 16px; height: 16px; } /* CF7 submit input */ .form-submit input[type="submit"], .form-submit .wpcf7-submit { display: block; margin: 0 auto; appearance: none; background: var(--navy); color: white; font-family: var(--jp); font-size: 15px; font-weight: 600; padding: 22px 80px; border: none; border-radius: 100px; cursor: pointer; letter-spacing: 0.08em; transition: background 0.3s var(--ease); } .form-submit input[type="submit"]:hover, .form-submit .wpcf7-submit:hover { background: var(--accent); color: var(--navy); } @media (max-width: 720px) { .form-row { flex-direction: column; gap: 12px; } .form-row > label { flex: none; padding-top: 0; } } /* CF7 ラジオボタン・チェックボックス — 横並び・左揃え・縦中央 */ .form-row .wpcf7-radio, .form-row .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; padding-top: 12px; } .form-row .wpcf7-list-item { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; cursor: pointer; } .form-row .wpcf7-list-item-label { font-family: var(--jp); font-size: 14px; font-weight: 400; color: var(--ink); white-space: nowrap; } .form-row .wpcf7-list-item input[type="radio"], .form-row .wpcf7-list-item input[type="checkbox"] { width: auto; margin: 0; flex-shrink: 0; accent-color: var(--navy); cursor: pointer; } /* Contact Form 7 — form-row Flexbox対応 */ .form-row .wpcf7-form-control-wrap { flex: 1; min-width: 0; display: block; width: 100%; box-sizing: border-box; } .form-row .wpcf7-form-control-wrap input[type="text"], .form-row .wpcf7-form-control-wrap input[type="tel"], .form-row .wpcf7-form-control-wrap input[type="email"], .form-row .wpcf7-form-control-wrap textarea, .form-row .wpcf7-form-control-wrap select { width: 100%; box-sizing: border-box; } .form-row .wpcf7-form-control-wrap input[type="radio"], .form-row .wpcf7-form-control-wrap input[type="checkbox"] { width: auto; } /* Contact Form 7 — kyusei-form */ .kyusei-form { width: 100%; } .kyusei-form__row { display: flex !important; align-items: flex-start; gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--line); } .kyusei-form__label { flex: 0 0 clamp(140px, 28%, 200px); font-family: var(--jp); font-size: 14px; font-weight: 600; color: var(--navy); padding-top: 12px; display: flex; align-items: center; gap: 10px; cursor: default; } .kyusei-form__field { flex: 1 !important; min-width: 0; display: block !important; width: 100%; } .kyusei-form__field .wpcf7-form-control-wrap { display: block; width: 100%; } .kyusei-form__field input[type="text"], .kyusei-form__field input[type="tel"], .kyusei-form__field input[type="email"], .kyusei-form__field textarea { display: block; width: 100%; box-sizing: border-box; font-family: var(--jp); font-size: 15px; padding: 12px 16px; border: 1px solid var(--line); background: var(--paper-cool); border-radius: 0; transition: border-color 0.2s, background 0.2s; } .kyusei-form__field input:focus, .kyusei-form__field textarea:focus { outline: none; border-color: var(--navy); background: white; } .kyusei-form__field textarea { min-height: 160px; resize: vertical; } .kyusei-form__submit { display: flex; justify-content: center; padding-top: 32px; } .kyusei-form__submit .wpcf7-submit { appearance: none; background: var(--navy); color: white; border: none; padding: 16px 48px; font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: 0.08em; transition: background 0.3s var(--ease); } .kyusei-form__submit .wpcf7-submit:hover { background: var(--accent); color: var(--navy); } .wpcf7-not-valid-tip { font-size: 12px; color: #b3261e; margin-top: 4px; display: block; } .wpcf7-response-output { font-size: 13px; padding: 12px 16px; margin-top: 16px; border: 1px solid var(--line); } @media (max-width: 480px) { .kyusei-form__row { flex-direction: column; gap: 8px; } .kyusei-form__label { flex: none; padding-top: 0; } } /* Long-form legal */ .legal { max-width: 820px; margin: 0 auto; font-family: var(--jp); font-size: 14px; line-height: 2; color: var(--ink-soft); } .legal h3 { font-family: var(--jp); font-size: 18px; font-weight: 700; color: var(--navy); margin: 40px 0 16px; padding-top: 32px; border-top: 1px solid var(--line); letter-spacing: -0.01em; } .legal h3:first-of-type { padding-top: 0; border-top: none; margin-top: 0; } .legal p { margin: 0 0 1em; } .legal ul { padding-left: 1.2em; } .legal ul li { list-style: disc; margin-bottom: 0.4em; } /* Section variants */ .section.tight { padding: clamp(56px, 8vw, 96px) var(--pad-x); } .section.bg-cool { background: var(--paper-cool); max-width: 100%; padding-left: 0; padding-right: 0; } .section.bg-cool > .inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); } .split-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } @media (max-width: 880px) { /* 1カラムに変更・DOM順（HTML記述順）で表示 */ .split-row { display: flex; flex-direction: column; gap: 32px; } .split-row .visual { width: 100%; } /* Solution ページのみ：テキスト→写真の順番に統一 */ .kyusei-page-solution .split-row .copy { order: 0; } .kyusei-page-solution .split-row .visual { order: 1; } /* Factory Concierge ブロック：左が上・右が下 */ .concierge-grid { grid-template-columns: 1fr !important; gap: 28px !important; } } .split-row .copy h3 { font-family: var(--jp); font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; color: var(--navy); margin: 0 0 20px; letter-spacing: -0.02em; line-height: 1.3; } .split-row .copy p { font-size: 14px; color: var(--ink-soft); line-height: 1.95; margin: 0 0 1em; } .split-row .copy strong { color: var(--navy); font-weight: 700; background: linear-gradient(transparent 62%, color-mix(in oklab, var(--accent) 30%, transparent) 62%); } .split-row .visual { aspect-ratio: 4 / 3; width: 100%; } .split-row .visual img { width: 100%; height: 100%; object-fit: cover; } /* Phone block */ .phone-block { border: 1px solid var(--line); padding: 40px; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; } .phone-block .lbl { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 6px; } .phone-block .num { font-family: var(--sans); font-size: clamp(28px, 3vw, 40px); font-weight: 700; color: var(--navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .phone-block .hrs { font-size: 12px; color: var(--ink-mute); margin-top: 6px; } .phone-block .ico { width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: white; display: grid; place-items: center; } .phone-block .ico svg { width: 22px; height: 22px; } @media (max-width: 600px) { .phone-block { grid-template-columns: 1fr; text-align: center; } .phone-block .ico { margin: 0 auto; } } /* Contact methods — SP 2-column compact override */ @media (max-width: 720px) { .contact-methods { gap: 12px; } .contact-methods .phone-block { padding: 16px 10px; gap: 12px; grid-template-columns: 1fr; text-align: center; } .contact-methods .phone-block .ico { width: 40px; height: 40px; margin: 0 auto; } .contact-methods .phone-block .ico svg { width: 16px; height: 16px; } .contact-methods .phone-block .lbl { font-size: 9px; letter-spacing: 0.08em; } .contact-methods .phone-block .num { font-size: 15px; letter-spacing: -0.01em; } .contact-methods .phone-block .hrs { font-size: 9px; margin-top: 4px; } } /* ================================================================ ABOUT — Philosophy parallax section ================================================================ */ .philosophy { position: relative; overflow: hidden; color: white; max-width: 100%; padding: clamp(120px, 16vw, 200px) var(--pad-x); isolation: isolate; } .philosophy-bg { position: absolute; inset: -20% 0; z-index: -1; will-change: transform; } .philosophy-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .philosophy-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--navy-deep) 78%, transparent) 0%, color-mix(in oklab, var(--navy-deep) 68%, transparent) 100%); } .philosophy-inner { position: relative; max-width: var(--container); margin: 0 auto; } .philosophy-statement { font-family: var(--jp); font-weight: 700; font-size: clamp(22px, 2.8vw, 38px); line-height: 1.6; letter-spacing: -0.02em; color: white; text-align: center; max-width: 880px; margin: 0 auto 48px; text-shadow: 0 2px 24px rgba(0,0,0,0.3); } .philosophy-statement em { font-style: normal; position: relative; color: white; } .philosophy-statement em::after { content: ""; position: absolute; left: -0.05em; right: -0.05em; bottom: 0.08em; height: 0.36em; background: var(--accent); opacity: 0.5; z-index: -1; border-radius: 4px; } .philosophy-note { text-align: center; font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.95; max-width: 680px; margin: 0 auto; text-shadow: 0 1px 12px rgba(0,0,0,0.25); } /* ================================================================ ABOUT — Vertical timeline (alternating L/R with central rail) ================================================================ */ .vtimeline { position: relative; max-width: 1080px; margin: 0 auto; padding: 32px 0; } .vtimeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent 0%, var(--accent) 6%, var(--accent) 94%, transparent 100%); opacity: 0.6; transform: translateX(-50%); } .vt-item { position: relative; display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; gap: 0; margin-bottom: 48px; } .vt-item:last-child { margin-bottom: 0; } .vt-item::before { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; background: white; border: 2px solid var(--accent); border-radius: 50%; transform: translate(-50%, -50%); z-index: 2; } .vt-content { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; padding-right: 24px; grid-column: 1; } .vt-icon { grid-column: 3; justify-self: flex-start; padding-left: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; } /* Alternate sides — even items flip */ .vt-item:nth-child(even) .vt-content { grid-column: 3; grid-row: 1; align-items: flex-start; padding-right: 0; padding-left: 24px; } .vt-item:nth-child(even) .vt-icon { grid-column: 1; grid-row: 1; justify-self: flex-end; padding-left: 0; padding-right: 24px; } .vt-year { font-family: var(--sans); font-size: clamp(22px, 2vw, 30px); font-weight: 700; color: var(--navy); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1; } .vt-tag { position: relative; background: var(--navy); color: white; padding: 14px 22px 14px 24px; font-family: var(--jp); font-size: 13.5px; font-weight: 500; line-height: 1.6; max-width: 320px; letter-spacing: 0.01em; } /* Pointer at the tag edge facing the rail */ .vt-item:nth-child(odd) .vt-tag::after { content: ""; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); border: 10px solid transparent; border-left-color: var(--navy); border-right: 0; } .vt-item:nth-child(even) .vt-tag::after { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); border: 10px solid transparent; border-right-color: var(--navy); border-left: 0; } .vt-icon img { display: block; width: 160px; height: 160px; object-fit: cover; } /* Stylish circular badge wrapping the icon */ .vt-badge { position: relative; width: 160px; height: 160px; display: grid; place-items: center; background: white; border-radius: 50%; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 36px -16px rgba(20, 58, 107, 0.25); isolation: isolate; } /* Conic-gradient ring that auto-rotates so accent color sweeps around */ .vt-badge::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient( from 0deg, transparent 0deg, color-mix(in oklab, var(--accent) 80%, transparent) 60deg, var(--accent) 90deg, color-mix(in oklab, var(--accent) 80%, transparent) 120deg, transparent 180deg, transparent 360deg ); opacity: 0.85; z-index: -1; filter: blur(2px); animation: vtBadgeSweep 6s linear infinite; } /* Inner dashed ring that slowly rotates the opposite direction */ .vt-badge::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed color-mix(in oklab, var(--accent) 50%, transparent); pointer-events: none; animation: vtBadgeRotate 24s linear infinite; } .vt-badge svg { display: block; width: 64px; height: 64px; color: var(--navy); position: relative; z-index: 1; animation: vtIconColor 6s linear infinite; } .vt-badge-label { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: var(--accent); text-align: center; } @keyframes vtBadgeSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes vtBadgeRotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes vtIconColor { 0%, 100% { color: var(--navy); } 50% { color: color-mix(in oklab, var(--accent) 80%, var(--navy)); } } /* Stagger so all 6 badges don't sweep in phase — looks more alive */ .vt-item:nth-child(1) .vt-badge::before { animation-delay: 0s; } .vt-item:nth-child(2) .vt-badge::before { animation-delay: -1s; } .vt-item:nth-child(3) .vt-badge::before { animation-delay: -2s; } .vt-item:nth-child(4) .vt-badge::before { animation-delay: -3s; } .vt-item:nth-child(5) .vt-badge::before { animation-delay: -4s; } .vt-item:nth-child(6) .vt-badge::before { animation-delay: -5s; } .vt-item:nth-child(1) .vt-badge svg { animation-delay: 0s; } .vt-item:nth-child(2) .vt-badge svg { animation-delay: -1s; } .vt-item:nth-child(3) .vt-badge svg { animation-delay: -2s; } .vt-item:nth-child(4) .vt-badge svg { animation-delay: -3s; } .vt-item:nth-child(5) .vt-badge svg { animation-delay: -4s; } .vt-item:nth-child(6) .vt-badge svg { animation-delay: -5s; } @media (prefers-reduced-motion: reduce) { .vt-badge::before, .vt-badge::after, .vt-badge svg { animation: none; } } .vt-icon img { display: block; width: 140px; height: 140px; object-fit: contain; background: white; border: 1px solid var(--line); } @media (max-width: 720px) { .vtimeline::before { left: 22px; } .vt-item, .vt-item:nth-child(even) { grid-template-columns: 60px 1fr; margin-bottom: 36px; } .vt-item::before { left: 22px; } .vt-content, .vt-item:nth-child(even) .vt-content { grid-column: 2; grid-row: 1; align-items: flex-start; padding: 0; } .vt-icon, .vt-item:nth-child(even) .vt-icon { grid-column: 2; grid-row: 2; justify-self: flex-start; padding: 16px 0 0; } .vt-item:nth-child(odd) .vt-tag::after, .vt-item:nth-child(even) .vt-tag::after { left: -10px; right: auto; border: 10px solid transparent; border-right-color: var(--navy); border-left: 0; } .vt-icon .vt-badge, .vt-icon img { width: 110px; height: 110px; } .vt-badge svg { width: 44px; height: 44px; } .vt-badge-label { font-size: 8px; letter-spacing: 0.18em; } } /* ================================================================ BUSINESS — photo placement helpers ================================================================ */ /* Tag overlay on .split-row visual (similar to About) */ .split-row .visual .visual-tag { position: absolute; bottom: 20px; left: -20px; background: var(--navy); color: white; padding: 12px 22px; display: flex; align-items: baseline; gap: 8px; font-family: var(--sans); z-index: 2; } .split-row .visual .visual-tag span { font-size: 10px; letter-spacing: 0.16em; opacity: 0.7; } .split-row .visual .visual-tag strong { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } /* Full-bleed cinematic photo break */ .bleed-photo { position: relative; width: 100%; height: clamp(360px, 56vh, 560px); overflow: hidden; /* Fallback navy gradient shows through until a photo is dropped */ background: radial-gradient(ellipse at 20% 100%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 55%), linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-mid) 60%, var(--navy-light) 100%); } .bleed-photo img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; object-fit: cover; } .bleed-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: /* Left-to-right legibility shade (keeps the title pop on the left) */ linear-gradient(90deg, color-mix(in oklab, var(--navy-deep) 75%, transparent) 0%, color-mix(in oklab, var(--navy-deep) 45%, transparent) 55%, color-mix(in oklab, var(--navy-deep) 35%, transparent) 100%), /* Site-matching blue color wash over the entire image */ linear-gradient(135deg, color-mix(in oklab, var(--navy-deep) 60%, transparent) 0%, color-mix(in oklab, var(--accent) 35%, transparent) 100%); pointer-events: none; mix-blend-mode: multiply; } /* Accent corner glow on top of everything for depth */ .bleed-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 90% 100%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 50%); pointer-events: none; } .bleed-photo-quote { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); height: 100%; display: flex; flex-direction: column; justify-content: center; color: white; /* Let drag-and-drop events reach the image-slot beneath */ pointer-events: none; } .bleed-photo-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--accent); margin-bottom: 18px; } .bleed-photo-eyebrow .bar { width: 40px; height: 1px; background: currentColor; } .bleed-photo-quote p { font-family: var(--jp); font-weight: 700; font-size: clamp(28px, 4vw, 56px); line-height: 1.25; letter-spacing: -0.03em; margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,0.35); } /* Capabilities split layout */ .cap-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 96px); align-items: flex-start; } .cap-visual { position: sticky; top: 100px; aspect-ratio: 3 / 4; width: 100%; overflow: hidden; } /* PC: 静的配置（パララックスなし） */ .cap-parallax { position: absolute; inset: 0; } .cap-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* PC: オーバーレイ非表示 */ .cap-overlay { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 1; } .cap-visual-meta { position: absolute; right: -16px; top: 24px; background: white; border: 1px solid var(--line); padding: 14px 20px; display: flex; align-items: baseline; gap: 8px; z-index: 2; } .cap-visual-meta span { font-family: var(--sans); font-size: 32px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1; } .cap-visual-meta em { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-mute); letter-spacing: 0.02em; } @media (max-width: 880px) { /* SP: セクション全体を基準に */ .section-cap { position: relative; overflow: hidden; } .cap-grid { display: block; position: relative; z-index: 1; } /* SP: cap-visual をセクション全体の背景として絶対配置 */ .cap-visual { position: absolute; inset: 0; aspect-ratio: unset; margin-bottom: 0; z-index: 0; background: var(--paper-cool); /* 画像なし時のベースカラー */ } /* SP: 画像は非表示 */ .cap-visual img { display: none; } /* SP: parallax ラッパーも不要なので縮退 */ .cap-parallax { inset: 0; } /* SP: 白フィルター 60% を表示 */ .cap-overlay { display: block; background: rgba(255, 255, 255, 0.6); } /* SP: 「5 capabilities」バッジは非表示 */ .cap-visual-meta { display: none; } } /* ================================================================ RECRUIT — Support cards ================================================================ */ .support-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; } .support-card { background: white; border: 1px solid var(--line); padding: 20px; display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; } /* Permanent accent strip on the left, slowly breathing in opacity */ .support-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); animation: supportStrip 3.6s ease-in-out infinite; } .support-card:nth-child(2)::before { animation-delay: -1.8s; } .support-icon { position: relative; flex-shrink: 0; width: 56px; height: 56px; display: grid; place-items: center; color: var(--navy); } .support-icon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in oklab, var(--accent) 14%, transparent); animation: supportPulse 3.6s ease-in-out infinite; } .support-icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed color-mix(in oklab, var(--accent) 45%, transparent); opacity: 0; animation: supportRing 3.6s ease-in-out infinite; } .support-card:nth-child(2) .support-icon::before, .support-card:nth-child(2) .support-icon::after { animation-delay: -1.8s; } .support-icon svg { position: relative; z-index: 1; width: 28px; height: 28px; animation: supportIcon 3.6s ease-in-out infinite; } .support-card:nth-child(2) .support-icon svg { animation-delay: -1.8s; } @keyframes supportStrip { 0%, 100% { opacity: 0.5; transform: scaleY(0.7); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } } @keyframes supportPulse { 0%, 100% { transform: scale(1); background: color-mix(in oklab, var(--accent) 14%, transparent); } 50% { transform: scale(1.08); background: color-mix(in oklab, var(--accent) 24%, transparent); } } @keyframes supportRing { 0%, 100% { opacity: 0; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes supportIcon { 0%, 100% { color: var(--navy); transform: translateY(0); } 50% { color: color-mix(in oklab, var(--accent) 70%, var(--navy)); transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .support-card::before, .support-icon::before, .support-icon::after, .support-icon svg { animation: none; } } .support-body { display: flex; flex-direction: column; gap: 4px; } .support-num { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.18em; color: var(--ink-mute); font-weight: 600; } .support-title { font-family: var(--jp); font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; line-height: 1.4; } .support-sub { font-family: var(--jp); font-size: 11.5px; color: var(--ink-mute); line-height: 1.5; } @media (max-width: 720px) { .support-list { grid-template-columns: 1fr; } } /* ================================================================ NEWS LIST PAGE ================================================================ */ .news-filter { display: flex; gap: 8px; padding-bottom: 32px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; } .np-tab { appearance: none; display: inline-flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--line); color: var(--ink); font-family: var(--jp); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 10px 20px; border-radius: 100px; cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .np-tab .np-count { font-family: var(--sans); font-size: 10.5px; color: var(--ink-mute); background: var(--paper-cool); padding: 2px 8px; border-radius: 100px; font-weight: 500; letter-spacing: 0.04em; transition: background 0.3s var(--ease), color 0.3s var(--ease); } .np-tab:hover { border-color: var(--navy); } .np-tab.is-active { background: var(--navy); color: white; border-color: var(--navy); } .np-tab.is-active .np-count { background: rgba(255,255,255,0.18); color: white; } /* SP: ALL を1行目・カテゴリーを2行目に */ @media (max-width: 720px) { .news-filter { gap: 6px; } /* ALL ボタン：1行を占有してカテゴリーを次行に押し出す */ .news-filter .np-tab:first-child { flex: 0 0 100%; } /* カテゴリーボタン：等分で横並び */ .news-filter .np-tab:not(:first-child) { flex: 1 1 0; justify-content: center; padding: 8px 10px; font-size: 11px; gap: 6px; } } .news-archive { border-top: 1px solid var(--line); } .news-archive li { border-bottom: 1px solid var(--line); } .news-archive li a { display: grid; grid-template-columns: 120px 100px 1fr auto; align-items: center; gap: 24px; padding: 28px 0; color: inherit; transition: padding-left 0.3s var(--ease), background 0.3s var(--ease); } .news-archive li a:hover { padding-left: 16px; background: var(--paper-warm); } .news-archive li .date { font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; color: var(--ink-mute); font-variant-numeric: tabular-nums; } .news-archive li .tag { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); padding: 5px 12px; border: 1px solid var(--navy); border-radius: 100px; text-align: center; } .news-archive li .title { font-family: var(--jp); font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.55; } .news-archive li .arr { width: 18px; height: 18px; color: var(--ink-mute); transition: transform 0.3s var(--ease), color 0.3s var(--ease); } .news-archive li a:hover .arr { transform: translateX(4px); color: var(--navy); } @media (max-width: 720px) { .news-archive li a { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; padding: 20px 0; align-items: start; } .news-archive li .date { grid-column: 1; grid-row: 1; } .news-archive li .tag { grid-column: 2; grid-row: 1; align-self: center; } .news-archive li .title { grid-column: 1; grid-row: 2; font-size: 14.5px; } .news-archive li .arr { grid-column: 2; grid-row: 2; align-self: center; } } .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding-top: 56px; font-family: var(--sans); } .page-num, .page-arrow { appearance: none; display: inline-grid; place-items: center; width: 44px; height: 44px; background: white; border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 500; border-radius: 50%; cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); text-decoration: none; } .page-arrow svg { width: 14px; height: 14px; } .page-num:hover, .page-arrow:hover { border-color: var(--navy); } .page-num.is-active { background: var(--navy); color: white; border-color: var(--navy); } .page-arrow:disabled, .page-arrow[disabled] { opacity: 0.35; cursor: not-allowed; } .page-dots { font-family: var(--sans); color: var(--ink-mute); padding: 0 6px; user-select: none; } /* ================================================================ NEWS DETAIL PAGE ================================================================ */ .np-article { padding-top: 132px; padding-bottom: 80px; background: var(--paper); } .np-article-inner { max-width: 820px; margin: 0 auto; padding: 0 var(--pad-x); } .breadcrumb.dark { color: var(--ink-mute); margin-bottom: 32px; } .breadcrumb.dark a { color: var(--ink-mute); } .breadcrumb.dark a:hover { color: var(--navy); } .breadcrumb.dark .now { color: var(--navy); font-weight: 600; } .np-article-head { padding-bottom: 36px; margin-bottom: 48px; border-bottom: 1px solid var(--line); } .np-article-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .np-article-meta .date { font-family: var(--sans); font-size: 14px; letter-spacing: 0.06em; color: var(--ink-mute); font-variant-numeric: tabular-nums; } .np-article-meta .tag { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); padding: 5px 12px; border: 1px solid var(--navy); border-radius: 100px; } .np-article-title { font-family: var(--jp); font-weight: 800; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.35; letter-spacing: -0.02em; color: var(--navy); margin: 0; text-wrap: balance; } .np-article-body { font-family: var(--jp); font-size: 15px; line-height: 2; color: var(--ink); } .np-article-body p { margin: 0 0 1.4em; } .np-article-body h2 { font-family: var(--jp); font-weight: 700; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.01em; color: var(--navy); margin: 2.4em 0 1em; padding-bottom: 12px; border-bottom: 1px solid var(--line); position: relative; padding-left: 16px; } .np-article-body h2::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 4px; height: 1em; background: var(--accent); } .np-article-body strong { font-weight: 700; color: var(--navy); background: linear-gradient(transparent 62%, color-mix(in oklab, var(--accent) 28%, transparent) 62%); padding: 0 0.1em; } .np-article-body ul { padding-left: 1.2em; margin: 0 0 1.4em; } .np-article-body ul li { list-style: disc; margin-bottom: 0.5em; } .np-article-foot { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; } .np-share { display: flex; align-items: center; gap: 14px; } .np-share-lbl { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-mute); font-weight: 600; } .np-share a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-mute); transition: color 0.3s, border-color 0.3s, background 0.3s; } .np-share a:hover { color: white; background: var(--navy); border-color: var(--navy); } .np-share svg { width: 14px; height: 14px; } .np-nav { max-width: 1180px; margin: 96px auto 0; padding: 0 var(--pad-x); display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; } .np-nav-link { display: flex; align-items: center; gap: 18px; padding: 22px 28px; border: 1px solid var(--line); background: white; color: inherit; transition: border-color 0.3s var(--ease), gap 0.3s var(--ease), background 0.3s var(--ease); } .np-nav-link:hover { border-color: var(--navy); gap: 24px; } .np-nav-link.np-next { justify-content: flex-end; text-align: right; } .np-nav-arr { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); flex-shrink: 0; color: var(--navy); transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .np-nav-arr svg { width: 14px; height: 14px; } .np-nav-link:hover .np-nav-arr { background: var(--navy); color: white; border-color: var(--navy); } .np-nav-lbl { font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-mute); font-weight: 600; margin-bottom: 6px; } .np-nav-title { font-family: var(--jp); font-size: 14px; color: var(--navy); font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; } .np-nav-back { position: relative; width: 88px; height: 88px; display: grid; place-items: center; background: white; border: 1px solid var(--line); border-radius: 50%; color: var(--navy); transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); overflow: hidden; } .np-nav-back .g { position: absolute; width: 4px; height: 4px; background: var(--ink-mute); border-radius: 1px; transition: background 0.4s var(--ease); } /* 3x3 grid of dots */ .np-nav-back .g:nth-child(1) { top: 22px; left: 22px; } .np-nav-back .g:nth-child(2) { top: 22px; left: 42px; } .np-nav-back .g:nth-child(3) { top: 22px; left: 62px; } .np-nav-back .g:nth-child(4) { top: 42px; left: 22px; } .np-nav-back .g:nth-child(5) { top: 42px; left: 42px; } .np-nav-back .g:nth-child(6) { top: 42px; left: 62px; } .np-nav-back .g:nth-child(7) { top: 62px; left: 22px; } .np-nav-back .g:nth-child(8) { top: 62px; left: 42px; } .np-nav-back .g:nth-child(9) { top: 62px; left: 62px; } .np-nav-back .lbl { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: var(--ink-mute); white-space: nowrap; } .np-nav-back:hover { background: var(--navy); border-color: var(--navy); } .np-nav-back:hover .g { background: white; } @media (max-width: 720px) { .np-nav { grid-template-columns: 1fr; gap: 12px; } .np-nav-back { margin: 0 auto; } .np-nav-back .lbl { position: static; transform: none; display: none; } .np-nav-link.np-next { justify-content: flex-start; text-align: left; } } /* ================================================================ GLOBAL REVEAL — soft fade-up on scroll ================================================================ */ .reveal { opacity: 0; transform: translate3d(0, 48px, 0); transition: opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out); will-change: opacity, transform; } .reveal.in-view { opacity: 1; transform: translate3d(0, 0, 0); } /* Slight rhythm — children inside a revealed group can stagger */ .reveal[data-stagger] > * { opacity: 0; transform: translate3d(0, 32px, 0); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); } .reveal.in-view[data-stagger] > * { opacity: 1; transform: translate3d(0, 0, 0); } .reveal.in-view[data-stagger] > *:nth-child(1) { transition-delay: 0ms; } .reveal.in-view[data-stagger] > *:nth-child(2) { transition-delay: 140ms; } .reveal.in-view[data-stagger] > *:nth-child(3) { transition-delay: 280ms; } .reveal.in-view[data-stagger] > *:nth-child(4) { transition-delay: 420ms; } .reveal.in-view[data-stagger] > *:nth-child(5) { transition-delay: 560ms; } .reveal.in-view[data-stagger] > *:nth-child(6) { transition-delay: 700ms; } .reveal.in-view[data-stagger] > *:nth-child(7) { transition-delay: 840ms; } .reveal.in-view[data-stagger] > *:nth-child(8) { transition-delay: 980ms; } .reveal.in-view[data-stagger] > *:nth-child(9) { transition-delay: 1120ms; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal[data-stagger] > * { opacity: 1; transform: none; transition: none; } } /* ================================================================ SP HAMBURGER MENU ================================================================ */ /* header-actions wraps cta-pill + nav-toggle in the 3rd grid column */ .header-actions { display: flex; align-items: center; gap: 12px; } /* Hamburger toggle button — hidden on PC */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; color: currentColor; position: relative; z-index: 102; pointer-events: auto; -webkit-tap-highlight-color: transparent; } .nav-toggle__bar { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transform-origin: center; transition: transform 0.35s var(--ease), opacity 0.35s var(--ease), width 0.35s var(--ease); } /* Open state: 3 bars → X */ .nav-is-open .nav-toggle .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-is-open .nav-toggle .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-is-open .nav-toggle .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Show on SP / hide cta-pill / fix header layout */ @media (max-width: 900px) { .site-header { display: flex; justify-content: space-between; align-items: center; } .primary-nav { display: none; } .nav-toggle { display: flex !important; } .header-actions .cta-pill { display: none; } } /* ── SP Nav Overlay ─────────────────────────────────────────── */ .sp-nav { position: fixed; inset: 0; z-index: 99; background: var(--navy, #0a1b3d); color: white; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 88px clamp(24px, 8vw, 64px) 60px; /* Hidden state */ opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease); overflow-y: auto; } .sp-nav.is-open { opacity: 1; visibility: visible; } /* Nav list */ .sp-nav__list { display: flex; flex-direction: column; width: 100%; margin-bottom: 40px; } .sp-nav__item { display: flex; align-items: baseline; gap: 12px; font-family: var(--sans); font-size: clamp(28px, 8vw, 48px); font-weight: 800; letter-spacing: 0.03em; color: white; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Entry animation */ opacity: 0; transform: translateX(24px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), color 0.2s; } .sp-nav.is-open .sp-nav__item { opacity: 1; transform: translateX(0); } .sp-nav.is-open .sp-nav__item:nth-child(1) { transition-delay: 0.06s; } .sp-nav.is-open .sp-nav__item:nth-child(2) { transition-delay: 0.12s; } .sp-nav.is-open .sp-nav__item:nth-child(3) { transition-delay: 0.18s; } .sp-nav.is-open .sp-nav__item:nth-child(4) { transition-delay: 0.24s; } .sp-nav.is-open .sp-nav__item:nth-child(5) { transition-delay: 0.30s; } .sp-nav__item:hover, .sp-nav__item:focus-visible { color: var(--accent); outline: none; } .sp-nav__item.active { color: var(--accent); } .sp-nav__num { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; opacity: 0.45; } /* Contact CTA inside overlay */ .sp-nav__contact { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--navy, #0a1b3d); background: var(--accent, #d4b483); padding: 14px 32px; border-radius: 100px; opacity: 0; transform: translateY(12px); transition: opacity 0.4s var(--ease) 0.36s, transform 0.4s var(--ease) 0.36s; } .sp-nav__contact svg { width: 14px; height: 14px; } .sp-nav.is-open .sp-nav__contact { opacity: 1; transform: translateY(0); } .sp-nav__contact:hover { opacity: 0.88; } /* Prevent body scroll while menu open */ body.nav-is-open { overflow: hidden; } /* ================================================================ RECRUIT — flow note (PC center only) ================================================================ */ .rec-flow-note { font-size: 14px; color: var(--ink-soft); line-height: 1.95; margin-top: 40px; max-width: 920px; } @media (min-width: 881px) { .rec-flow-note { margin-left: auto; margin-right: auto; text-align: center; } }