/*
Theme Name: Plan Invest
Theme URI: https://planinvest-draft.sinac.co.jp
Author: SINAC
Description: Plan Invest Corporate Site Theme
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.2
License: Private
Text Domain: planinvest
*/
/* ============================================
RESET & BASE
============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; background: #0a0a0a; }
html::before {
content: '';
position: fixed;
inset: 0;
background: #0a0a0a;
z-index: -9999;
pointer-events: none;
}
body { font-family: var(--font-ja); color: var(--color-text-primary); background: var(--color-bg); line-height: var(--lh-normal); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity 0.3s ease; }
a:hover { opacity: 0.7; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
/* ============================================
DESIGN TOKENS (CSS Custom Properties)
============================================ */
:root {
/* Colors */
--color-bg: #ffffff;
--color-bg-dark: #1a1a1a;
--color-bg-cream: #f7f4ed;
--color-bg-gray: #f2f2f2;
--color-text-primary: #1a1a1a;
--color-text-secondary: #666666;
--color-text-on-dark: #ffffff;
--color-accent: #a8a8a8;
--color-border: #e5e5e5;
--color-overlay: rgba(15,15,15,0.95);
/* Typography */
--font-en: "Baskerville", "Libre Baskerville", "Noto Serif JP", Georgia, serif;
--font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
--font-num: "Baskerville", "Libre Baskerville", Georgia, serif;
/* Font sizes (fluid) */
--fs-hero-en: clamp(40px, 7vw, 100px);
--fs-section-en: clamp(32px, 5vw, 72px);
--fs-section-ja: clamp(12px, 1.2vw, 15px);
--fs-h2: clamp(22px, 2.5vw, 32px);
--fs-h3: clamp(17px, 1.8vw, 22px);
--fs-body: 15px;
--fs-small: 13px;
--fs-num: clamp(60px, 8vw, 120px);
/* Line heights */
--lh-tight: 1.2;
--lh-normal: 1.8;
--lh-loose: 2.2;
/* Spacing */
--container-max: 1280px;
--container-pad: clamp(20px, 5vw, 80px);
--section-pad-y: clamp(80px, 10vw, 160px);
--section-gap: clamp(40px, 5vw, 80px);
--grid-gap: clamp(20px, 3vw, 40px);
/* Header */
--header-h: 80px;
--header-h-sp: 60px;
}
/* ============================================
UTILITY
============================================ */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.section-pad { padding: var(--section-pad-y) 0; }
.text-center { text-align: center; }
.text-en { font-family: var(--font-en); }
.text-num { font-family: var(--font-num); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
/* Placeholder image */
.ph-img {
background: var(--color-bg-gray);
display: flex; align-items: center; justify-content: center;
color: #aaa; font-size: 12px; letter-spacing: 0.05em;
width: 100%; position: relative; overflow: hidden;
}
/* Animation base (GSAP targets) */
.anim-fade-up { opacity: 0; transform: translateY(40px); }
.anim-fade-left { opacity: 0; transform: translateX(-60px); }
.anim-fade-right { opacity: 0; transform: translateX(60px); }
.anim-fade-in { opacity: 0; }
.hero-tagline-slow { opacity: 0; }
.anim-ready { opacity: 1 !important; transform: none !important; }
/* ---- Page transition overlay (kills white flash between pages) ---- */
#page-fade-overlay {
position: fixed;
inset: 0;
background: #0a0a0a;
z-index: 9998;
pointer-events: none;
opacity: 1;
animation: pageFadeOverlayOut 0.8s 0.05s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
#page-fade-overlay.is-leaving {
animation: none;
opacity: 1;
pointer-events: auto;
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pageFadeOverlayOut {
to { opacity: 0; }
}
/* ---- Loading ---- */
#loading {
position: fixed;
inset: 0;
background: #0a0a0a;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
}
#loading.hide {
opacity: 0;
pointer-events: none;
transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1); /* transition only declared when needed */
}
.loading-symbol {
/* Visible from first paint to prevent FOUC flicker */
}
.loading-brand {
font-family: 'Baskerville', 'Times New Roman', Georgia, serif;
font-size: clamp(2.5rem, 8vw, 6rem);
font-weight: 300;
letter-spacing: 0.3em;
color: #fff;
/* System font only — avoids web-font swap reflow that caused flicker */
}
.blur-out-expand {
opacity: 1;
transform: none;
-webkit-animation: blur-out-expand 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: blur-out-expand 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes blur-out-expand {
0% {
-webkit-filter: blur(0.01);
filter: blur(0.01);
}
100% {
letter-spacing: 1em;
-webkit-filter: blur(12px) opacity(0%);
filter: blur(12px) opacity(0%);
}
}
@keyframes blur-out-expand {
0% {
-webkit-filter: blur(0.01);
filter: blur(0.01);
}
100% {
letter-spacing: 1em;
-webkit-filter: blur(12px) opacity(0%);
filter: blur(12px) opacity(0%);
}
}
.loading-sub {
font-size: 11px;
letter-spacing: 0.4em;
color: rgba(255,255,255,0.3);
/* No entrance animation — prevents adjacent flicker via opacity transition */
}
@keyframes loading-brand-in {
to { opacity: 1; transform: translateY(0); }
}
/* 回転ゲージ */
.loading-gauge {
position: relative;
width: 64px;
height: 64px;
/* No entrance opacity animation — stroke fill + spinner remain inside */
}
.loading-gauge svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.loading-gauge-track {
fill: none;
stroke: rgba(255,255,255,0.08);
stroke-width: 2;
}
.loading-gauge-bar {
fill: none;
stroke: #b8b8b8;
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 163;
stroke-dashoffset: 163;
animation: gauge-fill 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}
/* 内側の回転リング */
.loading-gauge-spin {
position: absolute;
inset: 8px;
border: 1px solid transparent;
border-top-color: rgba(201, 169, 97, 0.4);
border-radius: 50%;
animation: gauge-spin 1s linear infinite;
}
@keyframes gauge-fill {
to { stroke-dashoffset: 0; }
}
@keyframes gauge-spin {
to { transform: rotate(360deg); }
}
/* ============================================
HEADER
============================================ */
#header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: var(--header-h); display: flex; align-items: center;
padding: 0 clamp(20px, 4vw, 60px);
transition: background 0.4s ease, backdrop-filter 0.4s ease;
}
#header.scrolled { background: rgba(15,15,15,0.9); backdrop-filter: blur(10px); }
.header-logo { flex: 1; }
.header-logo a { display: inline-flex; align-items: center; }
.header-logo svg, .header-logo img { height: 36px; width: auto; }
.header-menu-btn {
width: 44px; height: 44px; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 7px; cursor: pointer;
position: relative; z-index: 102;
}
.header-menu-btn span {
display: block; width: 28px; height: 1.5px; background: #fff;
transition: transform 0.4s ease, opacity 0.4s ease;
transform-origin: center;
}
.header-menu-btn.open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.header-menu-btn.open span:nth-child(2) { opacity: 0; }
.header-menu-btn.open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
/* ============================================
NAV OVERLAY
============================================ */
#nav-overlay {
position: fixed; inset: 0; background: var(--color-overlay);
z-index: 101; display: flex; align-items: center;
padding: calc(var(--header-h) + 40px) clamp(40px, 8vw, 120px) 60px;
opacity: 0; visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
#nav-overlay.open { opacity: 1; visibility: visible; }
.nav-overlay-inner { width: 100%; }
.nav-primary { display: flex; flex-direction: column; gap: 8px; }
.nav-item { overflow: hidden; }
.nav-item > a {
font-family: var(--font-en); font-size: clamp(24px, 4vw, 52px);
color: var(--color-text-on-dark); letter-spacing: 0.05em;
display: inline-block; line-height: 1.2;
transform: translateY(100%); transition: transform 0.5s ease;
}
#nav-overlay.open .nav-item > a { transform: translateY(0); }
.nav-sub { display: flex; gap: 20px; padding: 6px 0 6px 4px; flex-wrap: wrap; }
.nav-sub a {
font-family: var(--font-ja); font-size: var(--fs-small);
color: rgba(255,255,255,0.5); letter-spacing: 0.1em;
position: relative; padding-bottom: 2px;
}
.nav-sub a::after {
content: ''; position: absolute; bottom: 0; left: 0;
width: 0; height: 1px; background: var(--color-accent);
transition: width 0.3s ease;
}
.nav-sub a:hover::after { width: 100%; }
.nav-sub a:hover { opacity: 1; color: rgba(255,255,255,0.9); }
.nav-close-hint {
position: absolute; bottom: 40px; right: 60px;
color: rgba(255,255,255,0.3); font-size: 12px; letter-spacing: 0.15em;
}
/* ============================================
PAGE HEADER (subpages)
============================================ */
.page-header {
position: relative;
height: 420px;
background: #0a0a0a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: var(--header-h);
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 100%, rgba(160,160,180,0.06) 0%, transparent 70%);
}
.page-header-en {
font-size: clamp(2.8rem,7vw,6rem);
font-weight: 800;
color: #fff;
letter-spacing: 0.04em;
line-height: 1;
font-family: 'Helvetica Neue', Arial, sans-serif;
position: relative;
opacity: 0;
animation: pageHeaderFadeUp 0.9s cubic-bezier(0.4,0,0.2,1) 0.2s forwards;
}
.page-header-ja {
font-size: 0.82rem;
color: rgba(255,255,255,0.45);
letter-spacing: 0.35em;
margin-top: 1rem;
position: relative;
opacity: 0;
animation: pageHeaderFadeUp 0.9s cubic-bezier(0.4,0,0.2,1) 0.4s forwards;
}
.page-header-deco { display: none; }
@keyframes pageHeaderFadeUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Breadcrumb */
.breadcrumb {
background: #f8f8f6;
border-bottom: 1px solid #e8e8e8;
padding: 0.8rem 0;
}
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-accent); opacity: 1; }
.breadcrumb span { margin: 0 8px; }
/* ============================================
SECTION TITLE
============================================ */
.section-title { text-align: center; margin-bottom: var(--section-gap); }
.section-title-en {
font-family: var(--font-en); font-size: var(--fs-section-en);
color: var(--color-text-primary); letter-spacing: 0.1em; line-height: 1; display: block;
}
.section-title-en.on-dark { color: var(--color-text-on-dark); }
.section-title-ja {
font-family: var(--font-ja); font-size: var(--fs-section-ja);
color: var(--color-text-secondary); letter-spacing: 0.25em;
margin-top: 12px; display: block;
}
.section-title-ja.on-dark { color: rgba(255,255,255,0.5); }
.section-title-deco {
display: flex; align-items: center; justify-content: center;
gap: 16px; margin-top: 20px;
}
.section-title-deco .deco-line { width: 80px; height: 1px; background: var(--color-accent); }
.section-title-deco .deco-diamond { width: 6px; height: 6px; background: var(--color-accent); transform: rotate(45deg); }
.section-title-deco { display: none !important; }
/* ============================================
ANCHOR NAV
============================================ */
.anchor-nav {
position: sticky; top: var(--header-h); z-index: 50;
background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--color-border);
}
.anchor-nav-inner {
display: flex; align-items: center; justify-content: center;
gap: clamp(20px, 4vw, 60px); height: 56px; padding: 0 var(--container-pad);
}
.anchor-nav a {
font-size: var(--fs-small); letter-spacing: 0.15em; color: var(--color-text-secondary);
position: relative; padding-bottom: 4px;
}
.anchor-nav a::after {
content: ''; position: absolute; bottom: 0; left: 0;
width: 0; height: 1px; background: var(--color-text-primary);
transition: width 0.3s ease;
}
.anchor-nav a:hover, .anchor-nav a.active { color: var(--color-text-primary); opacity: 1; }
.anchor-nav a:hover::after, .anchor-nav a.active::after { width: 100%; }
/* ============================================
HERO SLIDER
============================================ */
.hero {
height: 100vh; min-height: 600px; position: relative;
overflow: hidden; background: var(--color-bg-dark);
}
.hero-slides { height: 100%; position: relative; }
.hero-slide {
position: absolute; inset: 0;
opacity: 0; transition: opacity 3s ease;
}
.hero-slide.active { opacity: 1; }
.hero-slide-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
will-change: transform;
transform-origin: center center;
animation: hero-zoom-out 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3.2s both;
}
@keyframes hero-zoom-out {
0% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.hero-slide::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 100%);
}
.hero-content {
position: absolute;
top: 50%;
left: var(--container-pad);
transform: translateY(-50%);
z-index: 2;
max-width: 90vw;
}
.hero-en {
font-family: var(--font-en);
font-size: clamp(26px, 6.2vw, 84px);
color: #fff;
line-height: 1.22;
letter-spacing: 0.02em;
display: block;
white-space: nowrap;
text-shadow: 0 2px 30px rgba(0,0,0,0.45);
}
.hero-sub {
font-size: clamp(14px, 1.6vw, 18px); color: rgba(255,255,255,0.7); /* 日本語サブタイトルを拡大（旧 11-14px / recruitページ） */
letter-spacing: 0.2em; margin-top: 20px; display: block;
}
/* ============================================
BUTTONS
============================================ */
.btn {
display: inline-flex; align-items: center; gap: 12px;
font-size: var(--fs-small); letter-spacing: 0.15em;
padding: 14px 32px; border: 1px solid currentColor;
transition: all 0.3s ease; font-family: var(--font-en);
}
.btn-dark { color: var(--color-text-on-dark); border-color: rgba(255,255,255,0.4); }
.btn-dark:hover { background: rgba(255,255,255,0.1); opacity: 1; }
.btn-light { color: var(--color-text-primary); border-color: var(--color-text-primary); }
.btn-light:hover { background: var(--color-text-primary); color: #fff; opacity: 1; }
.btn-accent { color: var(--color-accent); border-color: var(--color-accent); }
.btn-accent:hover { background: var(--color-accent); color: #fff; opacity: 1; }
.btn-arrow::after { content: '→'; font-family: inherit; }
/* ============================================
NEWS - 2 COLUMN LIVE
============================================ */
/* ライブ感パルスアニメーション */
@keyframes news-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
40% { transform: scale(1.6); opacity: 0.4; }
60% { transform: scale(1.2); opacity: 0.7; }
}
@keyframes news-item-breathe {
0%, 100% { border-left-color: transparent; }
50% { border-left-color: var(--color-accent); }
}
.news-live-badge {
display: inline-flex; align-items: center; gap: 8px;
font-size: 10px; letter-spacing: 0.2em; color: var(--color-accent);
margin-bottom: 24px;
}
.news-live-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-accent);
animation: news-pulse 1.8s ease-in-out infinite;
flex-shrink: 0;
}
.news-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 60px;
border-top: 1px solid var(--color-border);
}
.news-col-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 0 16px;
border-bottom: 2px solid var(--color-text-primary);
margin-bottom: 0;
}
.news-col-title {
font-family: var(--font-en);
font-size: clamp(13px,1.5vw,16px);
letter-spacing: 0.2em;
color: var(--color-text-primary);
}
.news-col-count {
font-family: var(--font-num);
font-size: 11px;
color: var(--color-text-secondary);
}
.news-col-divider {
width: 1px;
background: var(--color-border);
margin: 0;
}
/* 各カラムのリスト */
.news-col-list { display: flex; flex-direction: column; }
.news-col-item {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--color-border);
border-left: 2px solid transparent;
padding-left: 0;
transition: border-left-color 0.3s ease, padding-left 0.3s ease, background 0.3s;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.news-col-item:hover {
border-left-color: var(--color-accent);
padding-left: 12px;
background: rgba(201,169,97,0.03);
opacity: 1;
}
/* 最新記事だけpulse */
.news-col-item:first-child {
animation: news-item-breathe 3s ease-in-out infinite;
}
.news-col-date {
flex-shrink: 0;
font-family: var(--font-en);
font-size: 11px;
color: var(--color-text-secondary);
letter-spacing: 0.05em;
white-space: nowrap;
}
.news-col-cat {
flex-shrink: 0;
font-size: 10px;
letter-spacing: 0.1em;
padding: 2px 8px;
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
white-space: nowrap;
}
.news-col-cat.is-column {
border-color: var(--color-accent);
color: var(--color-accent);
}
.news-col-title-text {
flex: 1;
min-width: 0;
margin: 0;
font-size: var(--fs-body);
line-height: 1.5;
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.news-col-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.news-col-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.news-col-tags .news-col-cat { font-size: 9px; padding: 2px 7px; }
.news-col-thumb {
flex: 0 0 80px;
width: 80px;
height: 60px;
overflow: hidden;
border-radius: 2px;
background: var(--color-bg-gray);
}
.news-col-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-col-thumb--placeholder {
background: #e8e8e8;
}
.news-more { text-align: right; margin-top: 40px; }
/* SP */
@media (max-width: 767px) {
.news-2col {
grid-template-columns: 1fr;
gap: 40px 0;
}
.news-col-divider { display: none; }
}
/* ── NEWS section: wider & larger (front page) ── */
#news.section-pad { padding: 8rem 0; }
#news > .container { max-width: 1600px; padding: 0 3rem; }
#news .section-title { margin-bottom: 3.5rem; }
#news .section-title-en { font-size: clamp(2.4rem, 4.2vw, 4rem); letter-spacing: 0.06em; }
#news .section-title-ja { font-size: clamp(1rem, 1.3vw, 1.25rem); }
#news .news-2col { gap: 0 90px; }
#news .news-col-header { padding: 22px 0; }
#news .news-col-title { font-size: clamp(15px, 1.7vw, 19px); letter-spacing: 0.22em; }
#news .news-col-count { font-size: 13px; }
#news .news-col-item { gap: 24px; padding: 22px 0; }
#news .news-col-item:hover { padding-left: 14px; }
#news .news-col-date { font-size: 13px; letter-spacing: 0.06em; }
#news .news-col-cat { font-size: 11px; padding: 3px 11px; }
#news .news-col-title-text { font-size: clamp(0.98rem, 1.15vw, 1.1rem); line-height: 1.6; }
#news .news-col-thumb { flex: 0 0 130px; width: 130px; height: 95px; }
#news .news-more { margin-top: 56px; }
@media (max-width: 1024px) {
#news > .container { max-width: 100%; padding: 0 2rem; }
#news .news-2col { gap: 0 48px; }
}
@media (max-width: 767px) {
#news.section-pad { padding: 5rem 0; }
/* Wrap each row: date+cat (+thumb on the right) on line 1, title full-width on line 2.
Prevents the fixed-width thumbnail from being pushed off-screen on narrow phones. */
#news .news-col-item {
flex-wrap: wrap;
column-gap: 12px;
row-gap: 8px;
padding: 16px 0;
align-items: center;
}
#news .news-col-item-meta { display: flex; align-items: center; gap: 10px; order: 1; }
#news .news-col-thumb { flex: 0 0 84px; width: 84px; height: 60px; order: 2; margin-left: auto; }
#news .news-col-title-text { flex: 1 0 100%; order: 3; margin: 0; }
}
/* ============================================
GROUP (left-right alternating)
============================================ */
.group-item {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--grid-gap); align-items: center;
padding: var(--section-pad-y) 0;
border-bottom: 1px solid var(--color-border);
}
.group-item:nth-child(even) .group-text { order: 2; }
.group-item:nth-child(even) .group-img { order: 1; }
.group-label { font-size: 11px; letter-spacing: 0.2em; color: var(--color-accent); margin-bottom: 8px; }
.group-name-en { font-family: var(--font-en); font-size: var(--fs-h2); line-height: 1.2; margin-bottom: 4px; }
.group-name-ja { font-size: var(--fs-small); color: var(--color-text-secondary); letter-spacing: 0.1em; margin-bottom: 24px; }
.group-desc { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-secondary); margin-bottom: 32px; }
.group-img-wrap { position: relative; }
.group-img-main { width: 100%; aspect-ratio: 4/3; }
.group-img-sub {
position: absolute; bottom: -30px; right: -30px;
width: 45%; aspect-ratio: 1; border: 4px solid #fff;
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
/* ============================================
ABOUT CARDS (3 columns)
============================================ */
.about-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.about-card {
position: relative; aspect-ratio: 3/4; overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
padding: 40px 30px; background: var(--color-bg-dark);
}
.about-card-bg {
position: absolute; inset: 0; background-size: cover; background-position: center;
transition: transform 0.6s ease; transform: scale(1.05);
}
.about-card:hover .about-card-bg { transform: scale(1); }
.about-card::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45); transition: background 0.4s; }
.about-card:hover::after { background: rgba(0,0,0,0.3); }
.about-card-content { position: relative; z-index: 2; text-align: center; color: #fff; }
.about-card-en { font-family: var(--font-en); font-size: clamp(20px, 2.5vw, 30px); letter-spacing: 0.12em; display: block; }
.about-card-arrow { margin-top: 16px; font-size: 20px; display: block; }
/* ============================================
SERVICE (numbered)
============================================ */
.service-list { display: flex; flex-direction: column; gap: 0; }
.service-item {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--grid-gap); align-items: center;
padding: var(--section-pad-y) 0; border-top: 1px solid var(--color-border);
}
.service-item:nth-child(even) .service-text { order: 2; }
.service-item:nth-child(even) .service-img { order: 1; }
.service-num { font-family: var(--font-num); font-size: var(--fs-num); color: var(--color-border); line-height: 1; }
.service-name-en { font-family: var(--font-en); font-size: var(--fs-h2); margin: 8px 0 4px; line-height: 1.2; }
.service-name-ja { font-size: var(--fs-small); color: var(--color-text-secondary); letter-spacing: 0.1em; margin-bottom: 24px; }
.service-desc { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-secondary); margin-bottom: 32px; }
.service-img { aspect-ratio: 4/3; }
/* ============================================
RECRUITMENT CTA
============================================ */
.recruit-cta {
position: relative; height: 80vh; min-height: 500px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; overflow: hidden;
}
.recruit-cta-bg {
position: absolute; inset: -20%; background-size: cover; background-position: center;
}
.recruit-cta::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.recruit-cta-content { position: relative; z-index: 2; color: #fff; }
.recruit-cta-en { font-family: var(--font-en); font-size: var(--fs-hero-en); line-height: 1.1; display: block; margin-bottom: 16px; }
.recruit-cta-sub { font-size: var(--fs-small); letter-spacing: 0.2em; opacity: 0.7; margin-bottom: 40px; display: block; }
/* ============================================
CONTACT CTA
============================================ */
.contact-cta { background: var(--color-bg-dark); padding: var(--section-pad-y) 0; text-align: center; }
.contact-cta-en { font-family: var(--font-en); font-size: var(--fs-section-en); color: #fff; display: block; margin-bottom: 16px; }
.contact-cta-sub { font-size: var(--fs-small); color: rgba(255,255,255,0.5); letter-spacing: 0.2em; margin-bottom: 40px; display: block; }
/* ============================================
FOOTER
============================================ */
#footer { background: var(--color-bg-dark); color: var(--color-text-on-dark); padding: 80px 0 40px; }
.footer-top { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; margin-bottom: 60px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-logo { margin-bottom: 28px; }
.footer-logo svg { height: 32px; width: auto; filter: brightness(0) invert(1); }
.footer-logo img { width: clamp(220px, 22vw, 320px); height: auto; display: block; }
.footer-info p { font-size: var(--fs-small); color: rgba(255,255,255,0.5); line-height: var(--lh-loose); }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.footer-nav-col { display: flex; flex-direction: column; gap: 14px; }
.footer-nav-col a { font-size: var(--fs-small); color: rgba(255,255,255,0.5); letter-spacing: 0.08em; transition: color 0.3s; }
.footer-nav-col a:hover { color: #fff; opacity: 1; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; }
.footer-copy { font-size: 11px; color: rgba(255,255,255,0.3); letter-spacing: 0.1em; }
.footer-pagetop {
width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.2);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.5); font-size: 18px; cursor: pointer;
transition: all 0.3s ease;
}
.footer-pagetop:hover { border-color: var(--color-accent); color: var(--color-accent); opacity: 1; }
/* ============================================
ABOUT PAGE
============================================ */
.company-table { width: 100%; border-collapse: collapse; }
.company-table tr { border-bottom: 1px solid var(--color-border); }
.company-table th { width: 200px; padding: 20px 0; font-size: var(--fs-small); letter-spacing: 0.08em; font-weight: normal; color: var(--color-text-secondary); vertical-align: top; text-align: left; }
.company-table td { padding: 20px 0 20px 40px; font-size: var(--fs-body); line-height: var(--lh-loose); }
/* ============================================
DATA VIZ (introduce page)
============================================ */
.data-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.data-item {
background: var(--color-bg-cream); padding: 40px 30px; text-align: center;
}
.data-num { font-family: var(--font-num); font-size: clamp(40px, 5vw, 72px); color: var(--color-text-primary); line-height: 1; }
.data-num span { font-size: 0.4em; }
.data-label { font-size: var(--fs-small); color: var(--color-text-secondary); letter-spacing: 0.1em; margin-top: 12px; }
/* ============================================
MEMBER CARDS
============================================ */
.member-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.member-card { position: relative; overflow: hidden; background: var(--color-bg-gray); }
.member-card-img { aspect-ratio: 3/4; overflow: hidden; }
.member-card-img .ph-img { height: 100%; }
.member-card-info { padding: 24px 20px; }
.member-card-dept { font-size: 11px; letter-spacing: 0.15em; color: var(--color-accent); margin-bottom: 8px; }
.member-card-catch { font-size: var(--fs-small); color: var(--color-text-secondary); margin-bottom: 12px; line-height: var(--lh-normal); }
.member-card-name { font-size: var(--fs-h3); letter-spacing: 0.05em; }
/* ============================================
RECRUIT PAGE
============================================ */
.culture-item {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--grid-gap); align-items: center;
padding: var(--section-pad-y) 0; border-top: 1px solid var(--color-border);
}
.culture-item:nth-child(even) .culture-text { order: 2; }
.culture-item:nth-child(even) .culture-img { order: 1; }
.culture-num { font-family: var(--font-num); font-size: var(--fs-num); color: var(--color-border); line-height: 1; }
.culture-title { font-family: var(--font-en); font-size: var(--fs-h2); margin: 8px 0 24px; }
.culture-desc { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-secondary); }
.culture-img { aspect-ratio: 4/3; }
.env-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.env-card { background: var(--color-bg-cream); }
.env-card-img { aspect-ratio: 16/9; }
.env-card-body { padding: 28px 24px; }
.env-card-title { font-family: var(--font-en); font-size: var(--fs-h3); margin-bottom: 16px; }
.env-card-desc { font-size: var(--fs-body); color: var(--color-text-secondary); line-height: var(--lh-loose); }
/* FAQ */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-q {
display: flex; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer;
}
.faq-q-icon {
width: 28px; height: 28px; border: 1px solid var(--color-text-primary);
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0; transition: transform 0.3s;
}
.faq-item.open .faq-q-icon { transform: rotate(45deg); }
.faq-q-text { font-size: var(--fs-body); font-weight: bold; }
.faq-a { padding: 0 0 24px 48px; font-size: var(--fs-body); color: var(--color-text-secondary); line-height: var(--lh-loose); display: none; }
.faq-item.open .faq-a { display: block; }
/* ============================================
CONTACT FORM
============================================ */
.contact-form-wrap { max-width: 800px; margin: 0 auto; }
.contact-steps { display: flex; justify-content: center; gap: 0; margin-bottom: 60px; }
.contact-step {
display: flex; align-items: center; gap: 16px;
font-size: var(--fs-small); letter-spacing: 0.1em; color: var(--color-text-secondary);
}
.contact-step + .contact-step::before { content: ''; width: 60px; height: 1px; background: var(--color-border); margin: 0 20px; }
.contact-step.active { color: var(--color-text-primary); }
.contact-step-num { font-family: var(--font-num); font-size: 24px; }
.contact-banners { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); margin-bottom: 60px; }
.contact-banner { background: var(--color-bg-gray); padding: 30px; display: flex; align-items: center; gap: 20px; }
.contact-banner-icon { width: 48px; height: 48px; }
.contact-banner-text strong { display: block; font-size: var(--fs-h3); margin-bottom: 4px; }
.contact-banner-text span { font-size: var(--fs-small); color: var(--color-text-secondary); }
/* Form fields */
.wpcf7 label { display: block; font-size: var(--fs-small); letter-spacing: 0.08em; margin-bottom: 8px; color: var(--color-text-secondary); }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
width: 100%; border: 1px solid var(--color-border); padding: 14px 16px;
font-family: var(--font-ja); font-size: var(--fs-body); background: #fafafa;
transition: border-color 0.3s; outline: none;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { border-color: var(--color-text-primary); background: #fff; }
.wpcf7 textarea { min-height: 160px; resize: vertical; }
.wpcf7 .wpcf7-submit { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-small); letter-spacing: 0.15em; padding: 16px 48px; background: var(--color-text-primary); color: #fff; font-family: var(--font-en); transition: background 0.3s; }
.wpcf7 .wpcf7-submit:hover { background: var(--color-accent); }
.form-group { margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.required-mark { color: var(--color-accent); margin-left: 4px; }
/* ============================================
POLICY PAGE
============================================ */
.policy-inner { max-width: 800px; margin: 0 auto; padding: var(--section-pad-y) var(--container-pad); }
.policy-inner h2 { font-size: var(--fs-h3); margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.policy-inner p { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-secondary); margin-bottom: 16px; }
/* ============================================
NEWS ARCHIVE
============================================ */
.news-archive-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
.news-archive-card { border: 1px solid var(--color-border); transition: box-shadow 0.3s; }
.news-archive-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
.news-archive-thumb { aspect-ratio: 16/9; overflow: hidden; }
.news-archive-thumb .ph-img { height: 100%; }
.news-archive-body { padding: 24px; }
.news-archive-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.news-archive-date { font-family: var(--font-en); font-size: var(--fs-small); color: var(--color-text-secondary); }
.news-archive-cat-badge { font-size: 11px; padding: 2px 10px; border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.news-archive-title { font-size: var(--fs-body); line-height: var(--lh-normal); }
.news-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 60px; }
.news-pagination a, .news-pagination span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); font-size: var(--fs-small); }
.news-pagination .current { background: var(--color-text-primary); color: #fff; border-color: var(--color-text-primary); }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1023px) {
.data-grid { grid-template-columns: repeat(2, 1fr); }
.about-cards { grid-template-columns: 1fr 1fr; }
.footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
:root { --header-h: var(--header-h-sp); }
.page-header { height: 260px; }
.group-item, .service-item, .culture-item { grid-template-columns: 1fr; }
.group-item:nth-child(even) .group-text,
.group-item:nth-child(even) .group-img,
.service-item:nth-child(even) .service-text,
.service-item:nth-child(even) .service-img,
.culture-item:nth-child(even) .culture-text,
.culture-item:nth-child(even) .culture-img { order: unset; }
.about-cards { grid-template-columns: 1fr; }
.member-grid { grid-template-columns: 1fr 1fr; }
.data-grid { grid-template-columns: 1fr 1fr; }
.footer-nav { grid-template-columns: 1fr; }
.news-archive-grid { grid-template-columns: 1fr; }
.env-grid { grid-template-columns: 1fr; }
.contact-banners { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.news-item { grid-template-columns: 1fr; gap: 8px; }
.anchor-nav-inner { gap: 16px; overflow-x: auto; justify-content: flex-start; }
.group-img-sub { display: none; }
}
/* ============================================
OUR BUSINESS - STICKY SCROLL
============================================ */
.our-business-outer {
/* スクロール量を広く確保 */
height: 200vh;
position: relative;
}
.our-business {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
background: var(--color-bg-dark);
}
.our-business .swiper {
height: 100%;
width: 100%;
}
.our-business .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
height: 100vh !important;
}
/* 縦Swiperが当てる touch-action:pan-x を打ち消し、指の縦スワイプをページスクロールに通す。
（スライドはページスクロール位置で駆動。allowTouchMove:false のため Swiper は縦を処理しない＝
そのままだと swiper 上での縦スクロールが死ぬ／最終スライド後に抜けられないバグになる） */
.ob-swiper,
.ob-swiper .swiper-wrapper,
.ob-swiper .swiper-slide {
touch-action: pan-y !important;
}
.ob-content-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
opacity: 0;
visibility: hidden;
}
/* 入ってくるスライド */
.swiper-slide-active .ob-content-inner {
animation: ob-zoom-in 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}
/* 出ていくスライド */
.ob-slide-leaving .ob-content-inner {
animation: ob-zoom-out 0.4s cubic-bezier(0.7,0,0.84,0) forwards;
}
@keyframes ob-zoom-in {
0% {
opacity: 0;
visibility: visible;
filter: blur(40px);
transform: scale(0.6);
}
60% {
filter: blur(0px);
opacity: 1;
}
100% {
opacity: 1;
visibility: visible;
filter: blur(0px);
transform: scale(1);
}
}
@keyframes ob-zoom-out {
0% {
opacity: 1;
visibility: visible;
filter: blur(0px);
transform: scale(1);
}
100% {
opacity: 0;
visibility: hidden;
filter: blur(30px);
transform: scale(1.4);
}
}
.ob-num {
font-family: var(--font-num);
font-size: clamp(80px,12vw,180px);
color: rgba(201,169,97,0.12);
line-height: 1;
display: block;
position: relative;
z-index: 2;
color: rgba(255,255,255,0.15) !important;
}
.ob-label {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.ob-label-line {
width: 40px;
height: 1px;
background: var(--color-accent);
position: relative;
z-index: 2;
}
.ob-label-text {
font-size: 11px;
letter-spacing: 0.2em;
color: var(--color-accent);
position: relative;
z-index: 2;
color: rgba(255,255,255,0.5) !important;
}
.ob-en {
font-family: var(--font-en);
font-size: clamp(36px,5vw,64px);
line-height: 1.1;
margin-bottom: 8px;
display: block;
position: relative;
z-index: 2;
color: #fff !important;
}
.ob-ja {
font-size: var(--fs-small);
color: rgba(255,255,255,0.5);
letter-spacing: 0.15em;
margin-bottom: 24px;
display: block;
position: relative;
z-index: 2;
color: rgba(255,255,255,0.8) !important;
}
.ob-desc {
font-size: var(--fs-body);
line-height: var(--lh-loose);
color: rgba(255,255,255,0.65);
margin-bottom: 32px;
position: relative;
z-index: 2;
color: rgba(255,255,255,0.8) !important;
}
.ob-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 0;
}
.ob-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
z-index: 1;
}
.ob-content-text {
position: absolute;
bottom: 6rem;
left: 4rem;
z-index: 2;
padding: 2rem 2.5rem;
max-width: 520px;
background: rgba(0,0,0,0.62);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-left: 2px solid rgba(255,255,255,0.2);
}
/* プログレスバー */
.ob-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: rgba(255,255,255,0.1);
z-index: 10;
}
.ob-progress-bar {
height: 100%;
background: var(--color-accent);
width: 33.33%;
transition: width 0.4s ease;
}
/* Swiper pagination */
.our-business .swiper-pagination {
right: 40px !important;
left: auto !important;
width: auto !important;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.our-business .swiper-pagination-bullet {
width: 6px;
height: 6px;
background: rgba(255,255,255,0.3);
border-radius: 0;
transform: rotate(45deg);
opacity: 1;
margin: 0 !important;
transition: background 0.3s, transform 0.3s;
}
.our-business .swiper-pagination-bullet-active {
background: var(--color-accent);
transform: rotate(45deg) scale(1.4);
}
/* スライド番号表示 */
.ob-slide-counter {
position: absolute;
bottom: 40px;
left: var(--container-pad);
z-index: 10;
color: rgba(255,255,255,0.3);
font-family: var(--font-en);
font-size: 12px;
letter-spacing: 0.1em;
}
.ob-slide-counter .current { color: var(--color-accent); font-size: 18px; }
@media (max-width: 767px) {
.ob-content-inner { grid-template-columns: 1fr; }
/* .ob-img is now visible on mobile — image fills background, text overlaid via .ob-content-text */
.ob-content-text {
left: 1rem !important;
right: 1rem !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
padding: 1.25rem 1.4rem !important;
max-width: none !important;
}
.our-business .swiper-pagination { right: 16px !important; }
/* 5枚 × 各100vh分のスクロール量を確保し、1スワイプ＝ほぼ1ページに揃える。
機構(scroll→idx)・ズームアニメは不変。range/dotクリックはJSが高さから動的計算。 */
.our-business-outer { height: 600vh; }
}
/* ── Hero scroll indicator ── */
.hero-scroll-indicator {
position: absolute;
right: clamp(20px, 3vw, 40px);
top: 50%;
transform: translateY(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
color: rgba(255,255,255,0.75);
text-decoration: none;
transition: opacity 0.3s ease;
}
.hero-scroll-indicator:hover {
opacity: 1;
color: #fff;
}
.hero-scroll-text {
writing-mode: vertical-rl;
font-family: var(--font-en);
font-size: 11px;
letter-spacing: 0.45em;
text-transform: uppercase;
padding-left: 0.45em;
animation: hero-scroll-text-fade 2.6s ease-in-out infinite;
}
.hero-scroll-line {
position: relative;
width: 1px;
height: 86px;
background: rgba(255,255,255,0.18);
overflow: hidden;
}
.hero-scroll-dot {
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 36px;
background: #b8b8b8;
transform: translate(-50%, -100%);
animation: hero-scroll-dot 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes hero-scroll-dot {
0% { transform: translate(-50%, -100%); opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { transform: translate(-50%, 100%); opacity: 0; }
}
@keyframes hero-scroll-text-fade {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
@media (max-width: 600px) {
.hero-scroll-indicator { display: none; }
}
/* ── Hero latest news widget (bottom-right glass card) ── */
.hero-news-widget {
position: absolute;
left: clamp(24px, 5vw, 80px);
bottom: clamp(90px, 14vh, 160px);
z-index: 4;
width: clamp(480px, 64vw, 880px);
background: rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 2px;
box-shadow: 0 12px 40px -8px rgba(0,0,0,0.35);
overflow: hidden;
}
.hero-news-row {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
text-decoration: none;
color: #fff;
transition: background 0.3s ease, padding 0.3s ease;
}
.hero-news-row:hover {
background: rgba(201, 169, 97, 0.08);
opacity: 1;
}
.hero-news-row + .hero-news-row {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-news-badge {
flex-shrink: 0;
font-family: var(--font-en);
font-size: 10px;
letter-spacing: 0.18em;
color: #b8b8b8;
border: 1px solid #b8b8b8;
padding: 3px 8px;
line-height: 1;
position: relative;
animation: hero-new-pulse-cyan 4.2s ease-in-out infinite;
}
.hero-news-row:nth-of-type(1) .hero-news-badge { animation-delay: 0s; }
.hero-news-row:nth-of-type(2) .hero-news-badge { animation-delay: 1.8s; }
.hero-news-label {
flex-shrink: 0;
font-family: var(--font-en);
font-size: 11px;
letter-spacing: 0.22em;
color: rgba(255, 255, 255, 0.55);
}
.hero-news-date {
flex-shrink: 0;
font-family: var(--font-en);
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.05em;
}
.hero-news-title {
flex: 1;
min-width: 0;
font-size: 14.5px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.92);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hero-news-cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-en);
color: rgba(255, 255, 255, 0.4);
transition: transform 0.3s ease, color 0.3s ease;
}
.hero-news-arrow {
font-size: 16px;
line-height: 1;
}
.hero-news-cta-text {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.hero-news-row:hover .hero-news-cta {
color: #b8b8b8;
transform: translateX(4px);
}
@keyframes hero-new-pulse-cyan {
0% {
box-shadow: 0 0 0 0 rgba(95, 214, 255, 0.75), 0 0 0 0 rgba(95, 214, 255, 0.4);
border-color: #5fd6ff;
color: #5fd6ff;
}
55% {
box-shadow: 0 0 0 9px rgba(95, 214, 255, 0), 0 0 0 16px rgba(95, 214, 255, 0);
border-color: #5fd6ff;
color: #5fd6ff;
}
100% {
box-shadow: 0 0 0 0 rgba(95, 214, 255, 0), 0 0 0 0 rgba(95, 214, 255, 0);
border-color: #b8b8b8;
color: #b8b8b8;
}
}
@media (max-width: 767px) {
.hero-news-widget {
left: var(--container-pad);
right: var(--container-pad);
bottom: 24px;
width: auto;
}
.hero-news-label,
.hero-news-date {
display: none;
}
.hero-news-row {
padding: 12px 14px;
gap: 10px;
}
.hero-news-title {
font-size: 13px; /* お知らせのタイトルを少し小さく（14.5→13px） */
white-space: normal; /* 1行省略をやめて折り返し可に */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 最大2段（2行）で表示 */
line-height: 1.35;
}
.hero-news-cta-text {
display: none;
}
}
.skw-outer { position: relative; height: 300vh; }
.skw-section { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #15181A; }
.skw-pages { overflow: hidden; position: relative; height: 100vh; }
.skw-page { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; }
.skw-page__half { position: absolute; top: 0; width: 50%; height: 100vh; transition: transform 1s cubic-bezier(0.77,0,0.175,1); }
.skw-page__half--left { left: 0; transform: translate3d(-32.4vh, 100%, 0); }
.skw-page__half--right { left: 50%; transform: translate3d(32.4vh, -100%, 0); }
.skw-page.active .skw-page__half { transform: translate3d(0,0,0); }
.skw-page__skewed { overflow: hidden; position: absolute; top: 0; width: 140%; height: 100%; transform: skewX(-18deg); background: #222; }
.skw-page__half--left .skw-page__skewed { left: -40%; }
.skw-page__half--right .skw-page__skewed { right: -40%; }
.skw-page__content { display: flex; align-items: center; justify-content: center; flex-direction: column; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: skewX(18deg); transition: transform 1s, opacity 1s; background-size: cover; background-position: center center; }
.skw-page__half--left .skw-page__content {
padding: 0 36% 0 6%;
box-sizing: border-box;
overflow: hidden;
transform-origin: 100% 0;
}
.skw-page__half--right .skw-page__content {
padding: 0 8% 0 32%;
overflow: hidden;
width: 100%;
box-sizing: border-box;
transform-origin: 0 100%;
}
.skw-page.inactive .skw-page__content { opacity: 0.5; transform: skewX(18deg) scale(0.95); }
.skw-page__heading { font-size: clamp(1.8rem,3vw,3rem); font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 1rem; align-self: flex-start; }
.skw-page__description { font-size: clamp(0.82rem,1.1vw,0.95rem); line-height: 1.9; color: rgba(255,255,255,0.8); align-self: flex-start; margin-bottom: 0.8rem; }
.skw-page__sub { font-size: clamp(0.75rem,1vw,0.85rem); line-height: 1.9; color: rgba(255,255,255,0.45); align-self: flex-start; }
.skw-eyebrow { font-size: 11px; letter-spacing: 0.45em; color: #a8a8a8; align-self: flex-start; margin-bottom: 0.8rem; }
.skw-nav { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 50; }
.skw-nav__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor: pointer; transition: background 0.3s, transform 0.3s; }
.skw-nav__dot.active { background: #a8a8a8; transform: scale(1.4); }
.skw-page__heading,
.skw-page__description,
.skw-page__sub,
.skw-eyebrow {
max-width: 100%;
overflow: hidden;
word-break: break-all;
overflow-wrap: break-word;
}
@media (max-width: 768px) {
/* Mobile: scroll-jacked sticky slider — 3枚 × 各100vh分のスクロール量を確保（=400vh）し、
1スワイプ＝ほぼ1ページに揃える。stickyRange=300vh→1枚100vh。JS の floor 機構・アニメは不変。 */
.skw-outer {
height: 400vh !important;
position: relative !important;
}
.skw-section {
position: sticky !important;
top: 0 !important;
height: 100vh !important;
overflow: hidden !important;
}
.skw-pages {
height: 100vh !important;
overflow: hidden !important;
position: relative;
}
.skw-page {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100vh !important;
display: flex !important;
flex-direction: column;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.skw-page.active {
opacity: 1 !important;
pointer-events: auto;
z-index: 2;
}
.skw-page.inactive,
.skw-page.inactive .skw-page__content {
opacity: 0 !important;
transform: none !important;
}
.skw-page.active .skw-page__content {
opacity: 1 !important;
transform: none !important;
}
.skw-page__half {
position: relative !important;
width: 100%;
height: 50vh;
left: 0 !important;
top: auto !important;
transform: none !important;
transition: none !important;
}
.skw-page__skewed {
position: relative !important;
width: 100% !important;
height: 100% !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
}
.skw-page__content {
position: relative !important;
transform: none !important;
padding: 1rem 1.75rem 3.25rem !important; /* extra bottom padding clears the dot nav */
justify-content: flex-start; /* raise text to top of its half so long copy isn't clipped/covered at the bottom */
align-items: stretch;
}
/* Slide 2 (私たちが目指す未来) keeps the original centered position — exclude from the raise above */
.skw-page-2 .skw-page__content {
padding: 1.5rem 1.75rem !important;
justify-content: center;
}
.skw-page__heading,
.skw-page__description,
.skw-page__sub,
.skw-eyebrow {
width: 100%;
max-width: 100% !important;
align-self: stretch !important;
}
.skw-page__heading { font-size: 1.75rem; line-height: 1.3; }
.skw-page__description { font-size: 0.88rem; line-height: 1.85; }
.skw-page__sub { font-size: 0.78rem; line-height: 1.85; }
.skw-eyebrow { font-size: 10px; }
/* Staggered fade-in for text elements when slide becomes active */
.skw-page .skw-eyebrow,
.skw-page .skw-page__heading,
.skw-page .skw-page__description,
.skw-page .skw-page__sub {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.skw-page.active .skw-eyebrow {
opacity: 1;
transform: translateY(0);
transition-delay: 0.25s;
}
.skw-page.active .skw-page__heading {
opacity: 1;
transform: translateY(0);
transition-delay: 0.4s;
}
.skw-page.active .skw-page__description {
opacity: 1;
transform: translateY(0);
transition-delay: 0.55s;
}
.skw-page.active .skw-page__sub {
opacity: 1;
transform: translateY(0);
transition-delay: 0.7s;
}
/* Dot nav: bottom-center, horizontal, indicates current slide */
.skw-nav {
position: absolute !important;
bottom: 1.2rem !important;
right: auto !important;
left: 50% !important;
top: auto !important;
transform: translateX(-50%) !important;
flex-direction: row !important;
gap: 0.6rem !important;
z-index: 50;
}
.skw-nav__dot {
width: 8px !important;
height: 8px !important;
}
}
/* ── Pick Up & Actual Result Section ── */
.pickup-result-section {
background: #fff;
padding: 8rem 0;
}
.pickup-result-section .container {
max-width: 1600px;
margin: 0 auto;
padding: 0 3rem;
}
/* Pick Up */
.pickup-block { margin-bottom: 8rem; }
.pickup-header { margin-bottom: 2.6rem; border-bottom: 1px solid #e0e0e0; padding-bottom: 1.4rem; display: flex; align-items: baseline; gap: 1.4rem; }
.pickup-title-en { font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 800; color: #111; letter-spacing: -0.02em; line-height: 1.05; }
.pickup-title-ja { font-size: clamp(1rem, 1.3vw, 1.3rem); color: #555; letter-spacing: 0.1em; font-weight: 600; }
.pickup-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.pickup-item { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; gap: 1.2rem; transition: transform 0.3s ease, opacity 0.2s; }
.pickup-item:hover { opacity: 0.9; transform: translateY(-4px); }
.pickup-item-img { width: 100%; aspect-ratio: 4/3; background-size: cover; background-position: center; border-radius: 2px; transition: filter 0.3s ease; }
/* 現在販売中 silver badge */
/* トップ販売中物件: 右上のカテゴリーラベル */
.pickup-cat {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
display: inline-block;
padding: 7px 16px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
color: #fff;
background: #1a1a2e;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.pickup-cat--itto { background: #2d4a22; }
.pickup-cat--tochi { background: #6b5330; }
.pickup-badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
display: inline-block;
padding: 8px 20px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
color: #2e2e2e;
background: linear-gradient(135deg, #d4d4d4 0%, #f6f6f6 28%, #b3b3b3 55%, #e6e6e6 78%, #c4c4c4 100%);
border: 1px solid rgba(255,255,255,0.55);
border-radius: 2px;
box-shadow: 0 4px 12px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(0,0,0,0.08);
text-shadow: 0 1px 0 rgba(255,255,255,0.55);
overflow: hidden;
isolation: isolate;
animation: pickupBadgeFloat 4.5s ease-in-out infinite;
}
.pickup-badge::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,0.78) 50%, transparent 62%, transparent 100%);
transform: translateX(-120%);
animation: pickupBadgeShine 3.6s ease-in-out infinite;
z-index: 0;
}
.pickup-badge-label { position: relative; z-index: 1; }
@keyframes pickupBadgeShine {
0% { transform: translateX(-120%); }
55% { transform: translateX(120%); }
100% { transform: translateX(120%); }
}
@keyframes pickupBadgeFloat {
0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(0,0,0,0.08); }
50% { box-shadow: 0 6px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -1px 0 rgba(0,0,0,0.1); }
}
@media (prefers-reduced-motion: reduce) {
.pickup-badge,
.pickup-badge::before { animation: none; }
}
.pickup-item:hover .pickup-item-img { filter: brightness(0.95); }
.pickup-item-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 0.4rem; }
.pickup-item-name { font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 700; color: #111; line-height: 1.35; }
.pickup-item-desc { font-size: clamp(0.85rem, 1vw, 0.95rem); color: #555; line-height: 1.7; }
/* Actual Result */
.result-block {}
.result-header { margin-bottom: 2.6rem; border-bottom: 1px solid #e0e0e0; padding-bottom: 1.4rem; display: flex; align-items: baseline; gap: 1.4rem; }
.result-title-en { font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 800; color: #111; letter-spacing: -0.02em; line-height: 1.05; }
.result-title-ja { font-size: clamp(1rem, 1.3vw, 1.3rem); color: #555; letter-spacing: 0.1em; font-weight: 600; }
.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.result-item { position: relative; display: block; text-decoration: none; overflow: hidden; aspect-ratio: 3/2; border-radius: 2px; }
.result-item-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.5s ease; }
.result-item:hover .result-item-img { transform: scale(1.06); }
.result-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.1) 55%, transparent 100%); }
.result-item-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.6rem 1.8rem; z-index: 2; }
.result-item-area { display: block; font-size: clamp(0.7rem, 0.85vw, 0.8rem); color: rgba(255,255,255,0.78); letter-spacing: 0.12em; margin-bottom: 0.4rem; }
.result-item-name { display: block; font-size: clamp(0.95rem, 1.4vw, 1.18rem); font-weight: 700; color: #fff; line-height: 1.35; }
@media (max-width: 1024px) {
.pickup-result-section .container { max-width: 100%; padding: 0 2rem; }
.pickup-list { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.result-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 768px) {
.pickup-result-section { padding: 5rem 0; }
.pickup-block { margin-bottom: 5rem; }
.pickup-list { grid-template-columns: 1fr; gap: 1.8rem; }
.pickup-item-img { aspect-ratio: 16/10; }
.result-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
.result-item-info { padding: 1rem 1.1rem; }
}
@media (min-width: 769px) {
.skw-page__half--left .skw-page__content { padding-left: 30% !important; padding-right: 30% !important; }
.skw-page__half--right .skw-page__content { padding-left: 30% !important; padding-right: 30% !important; }
}
/* ── Result Category ── */
.result-category { margin-bottom: 4rem; }
.result-cat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.result-cat-title { font-size: clamp(1.05rem, 1.3vw, 1.25rem); font-weight: 700; color: #333; letter-spacing: 0.12em; padding-left: 1rem; border-left: 4px solid #a8a8a8; }
.result-cat-link { font-size: 0.82rem; letter-spacing: 0.08em; color: #555; text-decoration: none; border-bottom: 1px solid #bbb; padding-bottom: 1px; transition: color 0.2s; white-space: nowrap; }
.result-cat-link:hover { color: #111; border-color: #111; }
.result-label { position: absolute; top: 16px; right: 16px; z-index: 3; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; padding: 4px 12px; }
.result-label--itto { background: #1a1a2e; color: #fff; }
.result-label--kuku { background: #2d4a22; color: #fff; }
.result-label--tochi { background: #4a2d1a; color: #fff; }
.pickup-more { margin-top: 2.4rem; text-align: right; }
/* ── Sales Result Detail ── */
.srd-main { background: #f8f8f6; }
.srd-hero { position: relative; height: 60vh; min-height: 400px; background-size: cover; background-position: center; }
.srd-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%); display: flex; align-items: flex-end; }
.srd-hero-inner { padding: 3rem 4rem; max-width: 900px; }
.srd-breadcrumb { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.6); letter-spacing: 0.1em; margin-bottom: 1rem; }
.srd-breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.srd-cat-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; padding: 3px 12px; margin-bottom: 0.8rem; }
.srd-cat-badge--itto { background: #1a1a2e; color: #fff; }
.srd-cat-badge--kuku { background: #2d4a22; color: #fff; }
.srd-cat-badge--tochi { background: #4a2d1a; color: #fff; }
.srd-hero-title { font-size: clamp(1.6rem,3vw,2.8rem); font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 0.6rem; }
.srd-hero-access { font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.srd-gallery { background: #111; padding: 2.5rem 0; }
.srd-gallery-main { max-width: 1000px; margin: 0 auto 1.2rem; padding: 0 2rem; }
.srd-gallery-main-img { width: 100%; height: 520px; background-size: cover; background-position: center; transition: opacity 0.2s ease; border-radius: 2px; }
.srd-gallery-thumbs { max-width: 1000px; margin: 0 auto; padding: 0 2rem; display: flex; gap: 8px; }
.srd-gallery-thumb { flex: 0 0 calc(25% - 6px); height: 130px; background-size: cover; background-position: center; cursor: pointer; border-radius: 2px; opacity: 0.5; transition: opacity 0.2s; border: 2px solid transparent; }
.srd-gallery-thumb:hover { opacity: 0.8; }
.srd-gallery-thumb.active { opacity: 1; border-color: #a8a8a8; }
.srd-body { padding: 4rem 0 6rem; }
.srd-container { max-width: 1000px; margin: 0 auto; padding: 0 2rem; }
.srd-info-section { background: #fff; border-radius: 2px; padding: 2.5rem 3rem; margin-bottom: 2rem; }
.srd-section-title { font-size: 1.1rem; font-weight: 700; color: #111; letter-spacing: 0.08em; margin-bottom: 1.5rem; padding-bottom: 0.8rem; border-bottom: 1px solid #e0e0e0; }
.srd-table { width: 100%; border-collapse: collapse; }
.srd-table tr { border-bottom: 1px solid #f0f0f0; }
.srd-table th { width: 160px; padding: 1.1rem 0; font-size: 0.85rem; font-weight: 600; color: #444; text-align: left; vertical-align: top; }
.srd-table td { padding: 1.1rem 0 1.1rem 2rem; font-size: 0.88rem; color: #222; line-height: 1.7; }
.srd-related { margin-top: 4rem; }
.srd-related-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; border-bottom: 1px solid #ddd; padding-bottom: 0.8rem; }
.srd-related-title { font-size: 1rem; font-weight: 700; color: #111; }
.srd-related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin-bottom: 2rem; }
.srd-rel-item { position: relative; display: block; text-decoration: none; overflow: hidden; aspect-ratio: 4/3; }
.srd-rel-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s; }
.srd-rel-item:hover .srd-rel-img { transform: scale(1.04); }
.srd-rel-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 50%); }
.srd-rel-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 1.2rem; z-index: 2; }
.srd-rel-area { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.7); margin-bottom: 0.2rem; }
.srd-rel-name { display: block; font-size: 0.85rem; font-weight: 700; color: #fff; line-height: 1.3; }
.srd-list-btn { text-align: center; margin-top: 2.5rem; }
/* ── Sales Result List ── */
.sr-main { background: #f8f8f6; min-height: 100vh; }
.sr-hero { background: #111; padding: 8rem 2rem 4rem; text-align: center; }
.sr-hero-en { display: block; font-size: 0.78rem; letter-spacing: 0.45em; color: #a8a8a8; margin-bottom: 1rem; }
.sr-hero-ja { font-size: clamp(2rem,4vw,3.5rem); font-weight: 800; color: #fff; letter-spacing: 0.05em; }
.sr-body { padding: 4rem 0 6rem; }
.sr-body .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.sr-filter { display: flex; gap: 12px; margin-bottom: 3rem; flex-wrap: wrap; }
.sr-filter-btn { background: #fff; border: 1.5px solid #ddd; padding: 0.75rem 2.2rem; font-size: 0.88rem; letter-spacing: 0.15em; color: #666; cursor: pointer; border-radius: 2px; transition: all 0.22s; font-family: inherit; font-weight: 500; }
.sr-filter-btn:hover { border-color: #111; color: #111; }
.sr-filter-btn.active { background: #111; border-color: #111; color: #fff; font-weight: 700; }
.sr-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.sr-item { position: relative; display: block; text-decoration: none; overflow: hidden; aspect-ratio: 4/3; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.sr-item.is-visible { opacity: 1; transform: translateY(0); }
.sr-item-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s ease; overflow: hidden; }
.sr-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-item:hover .sr-item-img { transform: scale(1.04); }
.sr-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 50%); }
.sr-item-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.2rem 1.4rem; z-index: 2; }
.sr-item-area { display: block; font-size: 0.7rem; color: rgba(255,255,255,0.7); letter-spacing: 0.08em; margin-bottom: 0.3rem; }
.sr-item-name { display: block; font-size: clamp(0.82rem,1.2vw,1rem); font-weight: 700; color: #fff; line-height: 1.3; }
.sr-label { position: absolute; top: 12px; right: 12px; z-index: 3; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; padding: 3px 10px; }
.sr-label--itto { background: #1a1a2e; color: #fff; }
.sr-label--kuku { background: #2d4a22; color: #fff; }
.sr-label--tochi { background: #4a2d1a; color: #fff; }
/* ── Pickup List ── */
.pu-main { background: #f8f8f6; min-height: 100vh; }
.pu-hero { background: #111; padding: 8rem 2rem 4rem; text-align: center; }
.pu-hero-en { display: block; font-size: 0.78rem; letter-spacing: 0.45em; color: #a8a8a8; margin-bottom: 1rem; }
.pu-hero-ja { font-size: clamp(2rem,4vw,3.5rem); font-weight: 800; color: #fff; letter-spacing: 0.05em; }
.pu-body { padding: 4rem 0 6rem; }
.pu-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.pu-filter { display: flex; gap: 12px; margin-bottom: 3rem; flex-wrap: wrap; }
.pu-filter-btn { background: #fff; border: 1.5px solid #ddd; padding: 0.75rem 2.2rem; font-size: 0.88rem; letter-spacing: 0.15em; color: #666; cursor: pointer; border-radius: 2px; transition: all 0.22s; font-family: inherit; font-weight: 500; }
.pu-filter-btn:hover { border-color: #111; color: #111; }
.pu-filter-btn.active { background: #111; border-color: #111; color: #fff; font-weight: 700; }
.pu-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.pu-item { position: relative; display: block; text-decoration: none; overflow: hidden; aspect-ratio: 3/4; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.pu-item.is-visible { opacity: 1; transform: translateY(0); }
.pu-item-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s ease; }
.pu-item:hover .pu-item-img { transform: scale(1.04); }
.pu-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%); }
.pu-item-status { position: absolute; top: 12px; left: 12px; z-index: 3; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; padding: 3px 10px; background: #c0392b; color: #fff; }
.pu-label { position: absolute; top: 12px; right: 12px; z-index: 3; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; padding: 3px 10px; }
.pu-label--itto { background: #1a1a2e; color: #fff; }
.pu-label--kuku { background: #2d4a22; color: #fff; }
.pu-label--tochi { background: #4a2d1a; color: #fff; }
.pu-item-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.4rem; z-index: 2; }
.pu-item-area { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.65); margin-bottom: 0.4rem; }
.pu-item-name { display: block; font-size: clamp(0.88rem,1.3vw,1.05rem); font-weight: 700; color: #fff; line-height: 1.3; }
/* ── Pickup Detail ── */
.pd-main { background: #f8f8f6; }
.pd-hero { position: relative; height: 100vh; min-height: 500px; background-size: cover; background-position: center; background-attachment: fixed; }
.pd-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%); display: flex; align-items: flex-end; }
.pd-hero-content { padding: 4rem; max-width: 900px; }
.pd-breadcrumb { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.55); letter-spacing: 0.1em; margin-bottom: 1rem; }
.pd-breadcrumb a { color: rgba(255,255,255,0.55); text-decoration: none; }
.pd-cat-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 3px 12px; margin-bottom: 0.6rem; margin-right: 8px; }
.pd-cat-badge--itto { background: #1a1a2e; color: #fff; }
.pd-cat-badge--kuku { background: #2d4a22; color: #fff; }
.pd-cat-badge--tochi { background: #4a2d1a; color: #fff; }
.pd-status-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 3px 12px; background: #c0392b; color: #fff; margin-bottom: 0.6rem; }
.pd-hero-title { font-size: clamp(2rem,4vw,4rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 0.8rem; letter-spacing: -0.02em; }
.pd-hero-access { font-size: 0.88rem; color: rgba(255,255,255,0.65); margin-bottom: 1rem; }
.pd-hero-price { font-size: clamp(1.2rem,2vw,1.8rem); font-weight: 700; color: #fff; letter-spacing: 0.05em; }
.pd-gallery { background: #0f0f0f; padding: 2rem 0; }
.pd-gallery-main { max-width: 1000px; margin: 0 auto 1rem; padding: 0 2rem; }
.pd-gallery-main-img { width: 100%; height: 520px; background-size: cover; background-position: center; transition: opacity 0.2s; border-radius: 2px; }
.pd-gallery-thumbs { max-width: 1000px; margin: 0 auto; padding: 0 2rem; display: flex; gap: 8px; }
.pd-gallery-thumb { flex: 0 0 calc(25% - 6px); height: 120px; background-size: cover; background-position: center; cursor: pointer; border-radius: 2px; opacity: 0.45; transition: opacity 0.2s; border: 2px solid transparent; }
.pd-gallery-thumb:hover { opacity: 0.8; }
.pd-gallery-thumb.active { opacity: 1; border-color: #a8a8a8; }
.pd-body { padding: 4rem 0 6rem; }
.pd-container { max-width: 1000px; margin: 0 auto; padding: 0 2rem; }
.pd-section { background: #fff; border-radius: 2px; padding: 2.5rem 3rem; margin-bottom: 1.5rem; }
.pd-section-title { font-size: 1rem; font-weight: 700; color: #111; letter-spacing: 0.1em; margin-bottom: 1.5rem; padding-bottom: 0.8rem; border-bottom: 1px solid #e0e0e0; }
.pd-table { width: 100%; border-collapse: collapse; }
.pd-table tr { border-bottom: 1px solid #f0f0f0; }
.pd-table th { width: 180px; padding: 1rem 0; font-size: 0.82rem; font-weight: 600; color: #555; text-align: left; vertical-align: top; }
.pd-table td { padding: 1rem 0 1rem 2rem; font-size: 0.88rem; color: #222; line-height: 1.7; }
.pd-price-cell { font-size: 1.2rem; font-weight: 700; color: #111; }
.pd-yield-cell { font-size: 1.1rem; font-weight: 700; color: #2d4a22; }
.pd-docs { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.pd-doc-item { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.5rem; background: #f8f8f6; border: 1px solid #e8e8e8; text-decoration: none; color: inherit; border-radius: 2px; transition: background 0.2s; }
.pd-doc-item:hover { background: #f0f0ee; }
.pd-doc-icon { font-size: 1.4rem; flex-shrink: 0; }
.pd-doc-name { flex: 1; font-size: 0.88rem; font-weight: 600; color: #111; }
.pd-doc-dl { font-size: 0.72rem; color: #888; letter-spacing: 0.08em; white-space: nowrap; }
.pd-cta { background: #111; border-radius: 2px; padding: 3rem; text-align: center; margin-bottom: 1.5rem; }
.pd-cta-text { color: rgba(255,255,255,0.7); font-size: 0.88rem; margin-bottom: 1.5rem; }
.pd-cta-btn { display: inline-block; padding: 1rem 3rem; border: 1.5px solid #fff; color: #fff; text-decoration: none; font-size: 0.88rem; letter-spacing: 0.2em; transition: all 0.22s; }
.pd-cta-btn:hover { background: #fff; color: #111; }
.pd-related { margin-top: 3rem; }
.pd-related-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; border-bottom: 1px solid #ddd; padding-bottom: 0.8rem; }
.pd-related-title { font-size: 1rem; font-weight: 700; color: #111; }
.pd-related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin-bottom: 2rem; }
.pd-rel-item { position: relative; display: block; text-decoration: none; overflow: hidden; aspect-ratio: 4/3; }
.pd-rel-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s; }
.pd-rel-item:hover .pd-rel-img { transform: scale(1.04); }
.pd-rel-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 50%); }
.pd-rel-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 1.2rem; z-index: 2; }
.pd-rel-area { display: block; font-size: 0.68rem; color: rgba(255,255,255,0.7); margin-bottom: 0.2rem; }
.pd-rel-name { display: block; font-size: 0.85rem; font-weight: 700; color: #fff; line-height: 1.3; }
.pd-list-btn { text-align: center; margin-top: 2rem; }
/* ── Column & News ── */
.cn-main { background: #f8f8f6; min-height: 100vh; }
.cn-hero { background: #111; padding: 8rem 2rem 4rem; text-align: center; }
.cn-hero-en { display: block; font-size: 0.78rem; letter-spacing: 0.45em; color: #a8a8a8; margin-bottom: 1rem; }
.cn-hero-ja { font-size: clamp(2rem,4vw,3.5rem); font-weight: 800; color: #fff; letter-spacing: 0.05em; }
.cn-body { padding: 4rem 0 6rem; }
.cn-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.cn-tabs { display: flex; gap: 12px; margin-bottom: 3rem; }
.cn-tab { display: inline-block; padding: 0.75rem 2.2rem; font-size: 0.88rem; letter-spacing: 0.15em; text-decoration: none; border: 1.5px solid #ddd; color: #666; border-radius: 2px; transition: all 0.22s; font-weight: 500; }
.cn-tab:hover { border-color: #111; color: #111; }
.cn-tab.active { background: #111; border-color: #111; color: #fff; font-weight: 700; }
.cn-filter { display: flex; gap: 12px; margin-bottom: 3rem; }
.cn-filter-btn { background: #fff; border: 1.5px solid #ddd; padding: 0.75rem 2.2rem; font-size: 0.88rem; letter-spacing: 0.15em; color: #666; cursor: pointer; border-radius: 2px; transition: all 0.22s; font-family: inherit; font-weight: 500; }
.cn-filter-btn:hover { border-color: #111; color: #111; }
.cn-filter-btn.active { background: #111; border-color: #111; color: #fff; font-weight: 700; }
.cn-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-bottom: 3rem; }
.cn-card { background: #fff; display: block; text-decoration: none; color: inherit; border-radius: 2px; overflow: hidden; opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.22s; }
.cn-card.is-visible { opacity: 1; transform: translateY(0); }
.cn-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.10); }
.cn-card-img { width: 100%; height: 200px; background-size: cover; background-position: center; transition: transform 0.4s; }
.cn-card:hover .cn-card-img { transform: scale(1.03); }
.cn-card-body { padding: 1.4rem; }
.cn-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem; margin-bottom: 0.8rem; }
.cn-card-date { font-size: 0.72rem; color: #888; letter-spacing: 0.08em; white-space: nowrap; }
.cn-card-cat { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; padding: 2px 7px; border-radius: 1px; white-space: nowrap; flex-shrink: 0; }
.cn-card-cat--column { background: #1a1a2e; color: #fff; }
.cn-card-cat--news { background: #2d4a22; color: #fff; }
.cn-card-title { font-size: 0.95rem; font-weight: 700; color: #111; line-height: 1.5; margin-bottom: 0.6rem; }
.cn-card-excerpt { font-size: 0.78rem; color: #777; line-height: 1.7; }
.cn-card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem 0.4rem; margin-top: 0.75rem; }
.pu-empty, .pickup-empty { grid-column: 1 / -1; width: 100%; text-align: center; color: #888; font-size: 0.9rem; padding: 48px 0; letter-spacing: 0.06em; }
/* 販売情報詳細: 本件に関するお問い合わせ */
.pkd-cta { text-align: center; background: #1a1a2e; padding: 40px 24px; margin: 56px 0 0; }
.pkd-cta-text { color: #fff; font-size: 1rem; letter-spacing: 0.06em; margin: 0 0 18px; }
.pkd-cta-btn { display: inline-block; background: #c9a961; color: #1a1a2e; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.08em; padding: 15px 44px; text-decoration: none; transition: opacity 0.2s; }
.pkd-cta-btn:hover { opacity: 0.85; }
/* 売買実績詳細: 売買情報の前のスクエア写真 */
.srd-square-wrap { display: flex; justify-content: center; margin: 0 0 48px; }
.srd-square { width: 100%; max-width: 420px; aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: #f0f0ed; }
.srd-access-line { display: block; }
.srd-access-line + .srd-access-line { margin-top: 4px; }
/* 記事末尾「この記事を書いた人」 */
.author-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 48px 0 0; padding: 20px 24px; background: #f6f6f4; border-left: 3px solid #c9a961; }
.author-byline-label { font-size: 0.72rem; letter-spacing: 0.14em; color: #888; }
.author-byline-name { font-size: 1.05rem; font-weight: 700; color: #1a1a2e; letter-spacing: 0.04em; }
.pcon-success-num { text-align: center; background: #1a1a2e; color: #fff; padding: 14px 18px; margin: 0 0 18px; font-size: 0.8rem; letter-spacing: 0.12em; }
.pcon-success-num strong { display: block; font-size: 1.5rem; margin-top: 4px; letter-spacing: 0.1em; }
.cn-more { display: flex; justify-content: center; margin-top: 1rem; }
.cn-more-btn { background: none; border: 1.5px solid #111; padding: 0.9rem 3rem; font-size: 0.85rem; letter-spacing: 0.2em; color: #111; cursor: pointer; font-family: inherit; transition: all 0.22s; }
.cn-more-btn:hover { background: #111; color: #fff; }
.cn-pagination { display: flex; justify-content: center; margin-top: 3rem; }
.cn-pagination .nav-links { display: flex; gap: 8px; }
.cn-pagination .page-numbers { display: inline-block; padding: 0.5rem 1rem; border: 1px solid #ddd; color: #555; text-decoration: none; font-size: 0.85rem; transition: all 0.2s; }
.cn-pagination .page-numbers.current, .cn-pagination .page-numbers:hover { background: #111; border-color: #111; color: #fff; }
/* ── Column/News Detail ── */
.col-main, .nd-main { background: #f8f8f6; padding: 6rem 0; }
.col-layout { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 300px; gap: 4rem; align-items: start; }
.col-article { background: #fff; border-radius: 2px; overflow: hidden; }
.col-header { padding: 3rem 3rem 0; }
.col-header-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.col-cat-badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; padding: 3px 10px; background: #1a1a2e; color: #fff; }
.col-cat-badge--news { background: #2d4a22; }
.col-date { font-size: 0.78rem; color: #888; letter-spacing: 0.08em; }
.col-author { font-size: 0.78rem; color: #888; }
.col-title { font-size: clamp(1.3rem,2.5vw,2rem); font-weight: 800; color: #111; line-height: 1.3; margin-bottom: 2rem; letter-spacing: -0.01em; }
.col-eyecatch { width: 100%; height: 420px; overflow: hidden; }
.col-eyecatch img { width: 100%; height: 100%; object-fit: cover; }
.col-eyecatch--dummy { background-size: cover; background-position: center; }
.col-body { padding: 3rem; font-size: 0.95rem; line-height: 2; color: #333; }
.col-body h2 { font-size: 1.2rem; font-weight: 800; color: #111; margin: 2.5rem 0 1rem; padding-left: 1rem; border-left: 3px solid #111; }
.col-body h3 { font-size: 1rem; font-weight: 700; color: #111; margin: 2rem 0 0.8rem; }
.col-body p { margin-bottom: 1.4rem; }
.col-body ul, .col-body ol { padding-left: 1.5rem; margin-bottom: 1.4rem; }
.col-body li { margin-bottom: 0.5rem; }
.nd-body { padding: 2rem 3rem 3rem; }
.col-footer { padding: 2rem 3rem; border-top: 1px solid #f0f0f0; }
.col-back-link { font-size: 0.82rem; color: #555; text-decoration: none; letter-spacing: 0.08em; }
.col-back-link:hover { color: #111; }
.col-sidebar { position: sticky; top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.col-sidebar-block { background: #fff; border-radius: 2px; padding: 1.5rem; }
.col-sidebar-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; color: #111; margin-bottom: 1.2rem; padding-bottom: 0.8rem; border-bottom: 1px solid #e8e8e8; text-transform: uppercase; }
.col-sidebar-item { display: block; text-decoration: none; color: inherit; padding: 0.7rem 0; border-bottom: 1px solid #f5f5f5; }
.col-sidebar-item:last-child { border-bottom: none; }
.col-sidebar-date { display: block; font-size: 0.68rem; color: #aaa; margin-bottom: 0.2rem; }
.col-sidebar-name { display: block; font-size: 0.78rem; color: #333; line-height: 1.5; }
.col-sidebar-item:hover .col-sidebar-name { color: #111; }
/* サムネイル付きサイドバー項目 */
.col-sidebar-item--thumb { display: flex; align-items: flex-start; gap: 10px; }
.col-sidebar-thumb { flex: 0 0 56px; width: 56px; height: 56px; background-size: cover; background-position: center; background-color: #f0f0ed; border-radius: 2px; }
.col-sidebar-thumb[data-empty] { background-image: none; }
.col-sidebar-texts { flex: 1; min-width: 0; }
.col-sidebar-item--thumb .col-sidebar-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.col-sidebar-cta { background: #111; text-align: center; }
.col-sidebar-cta p { font-size: 0.78rem; color: rgba(255,255,255,0.65); margin-bottom: 1rem; }
.col-sidebar-contact { display: inline-block; border: 1px solid rgba(255,255,255,0.4); color: #fff; text-decoration: none; padding: 0.6rem 1.5rem; font-size: 0.78rem; letter-spacing: 0.12em; transition: all 0.22s; }
.col-sidebar-contact:hover { background: #fff; color: #111; }
/* ── Responsive ── */
@media (max-width: 768px) {
.sr-grid, .pu-grid { grid-template-columns: repeat(2,1fr); }
/* カテゴリー選択は必ず1行（区分・一棟・土地を横並びのまま） */
.sr-filter, .pu-filter { flex-wrap: nowrap; gap: 8px; }
.sr-filter-btn, .pu-filter-btn {
flex: 1 1 0;
min-width: 0;
padding: 0.7rem 0.4rem;
font-size: 0.8rem;
letter-spacing: 0.06em;
white-space: nowrap;
text-align: center;
}
/* 「販売情報はありません」等の文言をグリッド全幅で中央に */
.pu-empty, .pickup-empty { grid-column: 1 / -1; }
.srd-hero-inner { padding: 2rem 1.5rem; }
.srd-info-section { padding: 1.5rem; }
.srd-table th { width: 100px; }
.srd-related-grid { grid-template-columns: repeat(2,1fr); }
.pd-hero { height: 70vh; background-attachment: scroll; }
.pd-hero-content { padding: 2rem 1.5rem; }
.pd-gallery-main-img { height: 240px; }
.pd-gallery-thumb { height: 70px; }
.pd-section { padding: 1.5rem; }
.pd-docs { grid-template-columns: 1fr; }
.pd-related-grid { grid-template-columns: repeat(2,1fr); }
.cn-grid { grid-template-columns: 1fr; gap: 1.2rem; }
.col-layout { grid-template-columns: 1fr; gap: 2rem; }
.col-header { padding: 2rem 1.5rem 0; }
.col-body { padding: 2rem 1.5rem; }
.col-footer { padding: 1.5rem; }
.col-eyecatch { height: 220px; }
.col-sidebar { position: static; }
}
/* ── Contact Banner ── */
.contact-banner {
background: #0f0f0f;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
position: relative;
overflow: hidden;
}
.contact-banner::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 90% at 18% 50%, rgba(220,220,240,0.22) 0%, transparent 65%),
radial-gradient(ellipse 50% 90% at 82% 50%, rgba(200,205,230,0.18) 0%, transparent 65%);
animation: banner-glow 5s ease-in-out infinite alternate;
pointer-events: none;
z-index: 0;
}
.contact-banner::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -35%;
width: 30%;
background: linear-gradient(110deg, transparent 0%, transparent 35%, rgba(255,255,255,0.14) 50%, transparent 65%, transparent 100%);
transform: skewX(-15deg);
animation: banner-sweep 4.5s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
@keyframes banner-glow {
0% { opacity: 0.55; transform: scale(1) translateX(0); }
100% { opacity: 1; transform: scale(1.12) translateX(2%); }
}
@keyframes banner-sweep {
0% { left: -35%; }
55% { left: 135%; }
100% { left: 135%; }
}
.contact-banner-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1300px;
margin: 0 auto;
padding: 3rem 4rem;
text-decoration: none;
color: inherit;
gap: 3rem;
position: relative;
z-index: 1;
}
.contact-banner-inner:hover { opacity: 0.8; }
.contact-banner-left { display: flex; align-items: center; gap: 1.6rem; flex-shrink: 0; }
.contact-banner-logo { height: clamp(48px, 4.5vw, 72px); width: auto; display: block; flex-shrink: 0; }
.contact-banner-titles { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.contact-banner-title {
font-family: var(--font-en);
font-size: clamp(2.2rem,4.4vw,3.8rem);
font-weight: 600;
color: #fff;
letter-spacing: 0.06em;
line-height: 1;
}
.contact-banner-title-ja {
display: inline-block;
font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Times New Roman", serif;
font-size: clamp(1.3rem,2.6vw,2.1rem);
font-weight: 600;
color: #0f0f0f;
background: #fff;
padding: 0.12em 0.5em;
letter-spacing: 0.08em;
line-height: 1.1;
}
.contact-banner-desc {
font-size: clamp(0.8rem,1.1vw,0.92rem);
color: rgba(255,255,255,0.55);
letter-spacing: 0.08em;
flex: 1;
text-align: center;
}
.contact-banner-arrow {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.25);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s;
}
.contact-banner-inner:hover .contact-banner-arrow {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.5);
}
@media (max-width: 768px) {
.contact-banner-inner { flex-direction: column; padding: 2.5rem 1.5rem; gap: 1.5rem; text-align: center; }
.contact-banner-left { justify-content: center; gap: 1.2rem; }
.contact-banner-logo { height: 56px; }
.contact-banner-titles { align-items: center; }
.contact-banner-desc { text-align: center; }
}
/* ── Business Detail Page ── */
.biz-main { background: #fff; }
.biz-hero { background: #111; padding: 8rem 2rem 4rem; text-align: center; }
.biz-hero-en { display: block; font-size: 0.78rem; letter-spacing: 0.45em; color: #a8a8a8; margin-bottom: 1rem; }
.biz-hero-ja { font-size: clamp(2rem,4vw,3.5rem); font-weight: 800; color: #fff; letter-spacing: 0.05em; }
.biz-anchor-nav { background: #f8f8f6; border-bottom: 1px solid #e8e8e8; position: sticky; top: 0; z-index: 100; }
.biz-anchor-inner { max-width: 1200px; margin: 0 auto; padding: 0.4rem 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.4rem; }
.biz-anchor-btn { display: inline-block; padding: 1.1rem 1.6rem; font-size: 0.78rem; letter-spacing: 0.1em; color: #666; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.2s; }
.biz-anchor-btn:hover { color: #111; border-bottom-color: #111; }
.biz-section { padding: 7rem 0; border-bottom: 1px solid #f0f0f0; }
.biz-section:nth-child(even) { background: #f8f8f6; }
.biz-section-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.biz-section--reverse .biz-section-inner { direction: rtl; }
.biz-section--reverse .biz-section-text { direction: ltr; }
.biz-section--reverse .biz-section-img { direction: ltr; }
.biz-section-label { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; }
.biz-num { font-size: 3.5rem; font-weight: 900; color: #e8e8e8; line-height: 1; letter-spacing: -0.04em; }
.biz-en { font-size: 0.72rem; letter-spacing: 0.25em; color: #a8a8a8; }
.biz-section-title { font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 800; color: #111; line-height: 1.2; margin-bottom: 1rem; }
.biz-section-lead { font-size: 1rem; font-weight: 600; color: #333; line-height: 1.7; margin-bottom: 1.5rem; }
.biz-section-body { font-size: 0.88rem; color: #555; line-height: 2; margin-bottom: 1.5rem; }
.biz-section-body p { margin-bottom: 1rem; }
.biz-list { list-style: none; padding: 0; margin-bottom: 1.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.biz-list li { font-size: 0.85rem; color: #333; padding-left: 1.2rem; position: relative; }
.biz-list li::before { content: '—'; position: absolute; left: 0; color: #a8a8a8; }
.biz-cta-link { display: inline-block; font-size: 0.82rem; letter-spacing: 0.15em; color: #111; text-decoration: none; border-bottom: 1.5px solid #111; padding-bottom: 2px; transition: opacity 0.2s; }
.biz-cta-link:hover { opacity: 0.6; }
.biz-img-wrap { width: 100%; height: 480px; background-size: cover; background-position: center; border-radius: 2px; }
.biz-contact-cta { background: #111; padding: 6rem 2rem; text-align: center; }
.biz-contact-inner { max-width: 600px; margin: 0 auto; }
.biz-contact-en { display: block; font-size: 0.72rem; letter-spacing: 0.45em; color: #a8a8a8; margin-bottom: 1rem; }
.biz-contact-title { font-size: clamp(1.4rem,2.5vw,2rem); font-weight: 800; color: #fff; margin-bottom: 1rem; }
.biz-contact-desc { font-size: 0.85rem; color: rgba(255,255,255,0.6); line-height: 1.8; margin-bottom: 2.5rem; }
@media (max-width: 768px) {
.biz-section-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.biz-section--reverse .biz-section-inner { direction: ltr; }
.biz-img-wrap { height: 260px; }
.biz-anchor-inner { gap: 0.2rem 0.3rem; padding: 0.4rem 0.5rem; }
.biz-anchor-btn { padding: 0.6rem 0.7rem; font-size: 0.68rem; }
}
/* ── Sticky CTA ── */
.sticky-cta {
position: fixed;
bottom: 0;
right: 0;
z-index: 9999;
width: 250px;
}
.sticky-cta-btn {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.65rem;
text-decoration: none;
padding: 0.85rem 1rem;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.3;
min-height: 52px;
transition: opacity 0.2s ease, transform 0.2s ease;
position: relative;
overflow: hidden;
}
.sticky-cta-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.9);
position: relative;
z-index: 1;
}
.sticky-cta-icon svg { display: block; width: 100%; height: 100%; }
.sticky-cta-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transform: skewX(-20deg);
animation: sticky-shimmer 4s ease-in-out infinite;
}
.sticky-cta-btn--property::after { animation-delay: 0s; }
.sticky-cta-btn--column::after { animation-delay: 1.5s; }
.sticky-cta-btn--consult::after { animation-delay: 2s; }
.sticky-cta-btn--seminar::after { animation-delay: 1s; }
@keyframes sticky-shimmer {
0% { left: -100%; opacity: 0; }
20% { opacity: 1; }
50% { left: 150%; opacity: 0; }
100% { left: 150%; opacity: 0; }
}
.sticky-cta-btn:hover { opacity: 0.88; transform: translateX(-3px); }
.sticky-cta-btn--property {
background: rgba(25,45,80,0.92);
color: #fff;
backdrop-filter: blur(8px);
}
.sticky-cta-bg {
position: absolute;
inset: 0;
background-image: url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=400&q=60');
background-size: cover;
background-position: center;
opacity: 0.2;
z-index: 0;
}
.sticky-cta-btn--property .sticky-cta-icon,
.sticky-cta-btn--property .sticky-cta-label,
.sticky-cta-btn--property .sticky-cta-arrow { position: relative; z-index: 1; }
/* 3ボタン共通：ヒーローのニュースと同じフロストガラス（半透明＋ブラー透かし）。白背景でも白文字が読めるよう濃紺フロストに */
.sticky-cta-btn--column,
.sticky-cta-btn--seminar,
.sticky-cta-btn--consult {
background: rgba(20, 32, 52, 0.60);
color: #fff;
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
border-top: 1px solid rgba(255,255,255,0.12);
text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
/* 左の先っぽだけグラデーションで明るく（ブランドのゴールド系で統一＝同系色） */
.sticky-cta-btn::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 135px;
z-index: 0;
pointer-events: none;
}
.sticky-cta-btn--column::before { background: linear-gradient(90deg, rgba(125,205,240,0.92) 0%, rgba(125,205,240,0) 100%); }
.sticky-cta-btn--seminar::before { background: linear-gradient(90deg, rgba(245,221,108,0.92) 0%, rgba(245,221,108,0) 100%); }
.sticky-cta-btn--consult::before { background: linear-gradient(90deg, rgba(120,210,150,0.92) 0%, rgba(120,210,150,0) 100%); }
.sticky-cta-label, .sticky-cta-arrow { position: relative; z-index: 1; }
.sticky-cta-label { flex: 1; }
.sticky-cta-arrow { font-size: 1.1rem; opacity: 0.5; flex-shrink: 0; }
@media (max-width: 768px) {
/* Mobile: full-width bottom bar, 3 equal columns */
.sticky-cta {
width: 100% !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
display: flex !important;
flex-direction: row !important;
}
.sticky-cta-btn {
flex: 1 1 0 !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
gap: 0.25rem !important;
padding: 0.55rem 0.3rem !important;
font-size: 0.6rem !important;
line-height: 1.25 !important;
min-height: 58px !important;
border-top: none !important;
}
.sticky-cta-btn--consult,
.sticky-cta-btn--seminar {
border-left: 1px solid rgba(255,255,255,0.15);
}
.sticky-cta-icon {
width: 18px !important;
height: 18px !important;
}
.sticky-cta-label {
flex: 0 0 auto !important;
width: 100%;
}
.sticky-cta-arrow {
display: none !important;
}
}
.deco-diamond { display: none !important; }
.section-title-deco { gap: 0 !important; }
.deco-line { flex: 1; max-width: 80px; }
/* ── CN Main Tabs ── */
.cn-main-tabs { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 2px solid #e0e0e0; }
.cn-main-tab { background: none; border: none; padding: 1rem 2.5rem; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.12em; color: #888; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.22s; font-family: inherit; }
.cn-main-tab:hover { color: #111; }
.cn-main-tab.active { color: #111; border-bottom-color: #111; }
/* ── CN Genre Sub-tabs ── */
.cn-genre-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2.5rem; padding-top: 1.2rem; }
.cn-genre-tab { background: #fff; border: 1px solid #ddd; padding: 0.45rem 1.1rem; font-size: 0.75rem; letter-spacing: 0.1em; color: #666; cursor: pointer; border-radius: 2px; transition: all 0.2s; font-family: inherit; }
.cn-genre-tab:hover { border-color: #111; color: #111; }
.cn-genre-tab.active { background: #111; border-color: #111; color: #fff; }
/* ── CN Genre label on card ── */
.cn-card-genre { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; padding: 2px 7px; background: #f0f0f0; color: #555; border-radius: 1px; }
/* ── Premium Contact Page ── */
.pcon-main { background: #f7f7f5; min-height: 100vh; overflow-x: hidden; }
/* Hero — animated gradient + floating orbs */
/* Contact hero — same 2-tier format as the Sales Result / News page heroes
(.sr-hero / .cn-hero). The EN/JA sizing & order come from the shared
"Page Hero Unified Format" rules; keep this minimal to match them exactly. */
.pcon-hero {
background: #111;
padding: 8rem 2rem 4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.pcon-hero-inner { position: relative; z-index: 1; }
.pcon-hero-en {
display: block;
font-family: var(--font-en);
margin-bottom: 1rem;
}
.pcon-hero-ja {
color: #fff;
letter-spacing: 0.05em;
}
.pcon-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
/* Step label */
.pcon-step-label {
display: flex;
align-items: baseline;
gap: 1.5rem;
margin-bottom: 3rem;
position: relative;
padding-bottom: 1.5rem;
}
.pcon-step-label::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 64px;
height: 2px;
background: linear-gradient(90deg, #0f0f0f, #5fd6ff);
}
.pcon-step-num {
font-family: var(--font-en);
font-size: 3.2rem;
font-weight: 900;
color: rgba(0,0,0,0.07);
line-height: 1;
letter-spacing: -0.04em;
}
.pcon-step-text { font-size: 1.05rem; font-weight: 700; color: #111; letter-spacing: 0.12em; }
.pcon-back-btn {
margin-left: auto;
background: #fff;
border: 1.5px solid #e0e0e0;
padding: 0.7rem 1.5rem;
font-size: 0.78rem;
color: #555;
cursor: pointer;
border-radius: 50px;
font-family: inherit;
transition: all 0.25s ease;
}
.pcon-back-btn:hover { border-color: #0f0f0f; background: #0f0f0f; color: #fff; }
/* Select section */
.pcon-select { padding: 6rem 0 4rem; }
.pcon-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.6rem;
}
.pcon-card {
background: #fff;
border: none;
padding: 2.6rem 2.4rem 2rem;
text-align: left;
cursor: pointer;
border-radius: 14px;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"num icon"
"title title"
"desc desc"
"footer footer";
gap: 0.5rem;
position: relative;
overflow: hidden;
font-family: inherit;
box-shadow: 0 4px 18px rgba(0,0,0,0.05);
transition: transform 0.4s cubic-bezier(0.77,0,0.175,1),
box-shadow 0.4s cubic-bezier(0.77,0,0.175,1);
opacity: 0;
transform: translateY(24px);
animation: pconCardIn 0.65s cubic-bezier(0.77,0,0.175,1) forwards;
animation-delay: calc(var(--i,0) * 0.09s);
}
@keyframes pconCardIn { to { opacity: 1; transform: translateY(0); } }
.pcon-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, #0a0a0a 0%, #1c1c1c 100%);
transform: translateY(100%);
transition: transform 0.5s cubic-bezier(0.77,0,0.175,1);
z-index: 0;
}
.pcon-card::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 80% 18%, rgba(95,214,255,0.18) 0%, transparent 55%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
pointer-events: none;
}
.pcon-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px -10px rgba(0,0,0,0.28); }
.pcon-card:hover::before, .pcon-card.active::before { transform: translateY(0); }
.pcon-card:hover::after, .pcon-card.active::after { opacity: 1; }
.pcon-card > * { position: relative; z-index: 2; }
.pcon-card-num {
grid-area: num;
font-family: var(--font-en);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.3em;
color: #aaa;
align-self: center;
transition: color 0.35s;
}
.pcon-card:hover .pcon-card-num, .pcon-card.active .pcon-card-num { color: rgba(255,255,255,0.65); }
.pcon-card-icon {
grid-area: icon;
color: #b8b8b8;
transition: color 0.35s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
align-self: center;
}
.pcon-card:hover .pcon-card-icon, .pcon-card.active .pcon-card-icon {
color: #5fd6ff;
transform: rotate(-10deg) scale(1.1);
}
.pcon-card-title {
grid-area: title;
font-size: 1.3rem;
font-weight: 800;
color: #111;
line-height: 1.3;
letter-spacing: 0.04em;
margin-top: 1.6rem;
transition: color 0.35s;
}
.pcon-card:hover .pcon-card-title, .pcon-card.active .pcon-card-title { color: #fff; }
.pcon-card-desc {
grid-area: desc;
font-size: 0.85rem;
color: #777;
line-height: 1.8;
margin-top: 0.6rem;
margin-bottom: 1.6rem;
transition: color 0.35s;
}
.pcon-card:hover .pcon-card-desc, .pcon-card.active .pcon-card-desc { color: rgba(255,255,255,0.6); }
.pcon-card-footer {
grid-area: footer;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1.1rem;
border-top: 1px solid #eee;
transition: border-color 0.35s;
}
.pcon-card:hover .pcon-card-footer, .pcon-card.active .pcon-card-footer { border-top-color: rgba(255,255,255,0.16); }
.pcon-card-cta {
font-family: var(--font-en);
font-size: 0.72rem;
letter-spacing: 0.32em;
font-weight: 700;
color: #aaa;
transition: color 0.35s;
}
.pcon-card:hover .pcon-card-cta, .pcon-card.active .pcon-card-cta { color: #5fd6ff; }
.pcon-card-arrow {
width: 38px;
height: 38px;
border-radius: 50%;
background: #f1f1ef;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: #888;
transition: all 0.35s ease;
}
.pcon-card:hover .pcon-card-arrow, .pcon-card.active .pcon-card-arrow {
background: #5fd6ff;
color: #0a0a0a;
transform: translateX(6px);
box-shadow: 0 0 0 6px rgba(95,214,255,0.18);
}
/* Form section */
.pcon-form-section {
padding: 6rem 0 8rem;
animation: pconFadeIn 0.6s cubic-bezier(0.77,0,0.175,1);
}
@keyframes pconFadeIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.pcon-selected-type { margin-bottom: 2.5rem; }
.pcon-selected-badge {
display: inline-flex;
align-items: center;
gap: 0.7rem;
background: linear-gradient(135deg, #0a0a0a, #2a2a2a);
color: #fff;
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.15em;
padding: 0.7rem 1.6rem 0.7rem 0.7rem;
border-radius: 50px;
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.pcon-selected-badge::before {
content: '✓';
width: 24px;
height: 24px;
background: #5fd6ff;
color: #0a0a0a;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
font-weight: 900;
}
.pcon-form {
background: #fff;
padding: 3.5rem;
border-radius: 14px;
box-shadow: 0 6px 30px rgba(0,0,0,0.06);
}
.pcon-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.pcon-form-group--full { grid-column: 1 / -1; }
.pcon-form-group { position: relative; }
.pcon-label {
display: block;
font-size: 0.72rem;
font-weight: 700;
color: #555;
letter-spacing: 0.18em;
margin-bottom: 0.7rem;
text-transform: uppercase;
}
.pcon-required {
font-size: 0.6rem;
background: #5fd6ff;
color: #0a0a0a;
padding: 2px 7px;
margin-left: 8px;
border-radius: 3px;
font-weight: 800;
letter-spacing: 0.1em;
}
.pcon-input, .pcon-select-input, .pcon-textarea {
width: 100%;
padding: 0.95rem 1.1rem;
border: 1.5px solid #e8e8e8;
border-radius: 8px;
font-size: 0.92rem;
font-family: inherit;
color: #111;
background: #fafafa;
transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
outline: none;
}
.pcon-input:focus, .pcon-select-input:focus, .pcon-textarea:focus {
border-color: #0a0a0a;
background: #fff;
box-shadow: 0 0 0 4px rgba(95,214,255,0.18);
}
.pcon-textarea { resize: vertical; }
/* 未選択（プレースホルダ）状態のselectはウォーターマーク風に淡色 */
.pcon-select-input:invalid { color: #999; }
.pcon-field-note { display: block; margin-top: 0.45rem; font-size: 0.72rem; color: #999; line-height: 1.5; }
.pcon-label-note { font-size: 0.7rem; color: #888; font-weight: 400; margin-left: 4px; }
.pcon-dob { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pcon-dob .pcon-select-input { width: auto; flex: 1 1 auto; min-width: 88px; }
.pcon-dob-unit { font-size: 0.85rem; color: #555; flex-shrink: 0; }
.pcon-radio-group { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.pcon-radio {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.85rem;
color: #333;
padding: 0.55rem 1.1rem;
border: 1.5px solid #e8e8e8;
border-radius: 50px;
background: #fafafa;
transition: all 0.2s;
}
.pcon-radio:hover { border-color: #0a0a0a; background: #fff; }
.pcon-radio input { accent-color: #0a0a0a; }
.pcon-check {
display: flex;
align-items: center;
gap: 0.8rem;
font-size: 0.85rem;
color: #444;
cursor: pointer;
padding: 1.1rem 1.3rem;
background: #f7f7f5;
border-radius: 8px;
}
.pcon-check a { color: #0a0a0a; text-decoration: underline; }
.pcon-check input { accent-color: #0a0a0a; width: 18px; height: 18px; flex-shrink: 0; }
.pcon-check + .pcon-check { margin-top: 0.6rem; }
.pcon-form-submit { margin-top: 3rem; text-align: center; }
.pcon-submit-btn {
background: linear-gradient(135deg, #0a0a0a 0%, #2a2a2a 100%);
color: #fff;
border: none;
padding: 1.2rem 5rem;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.28em;
white-space: nowrap;
cursor: pointer;
font-family: inherit;
border-radius: 50px;
position: relative;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pcon-submit-btn::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(110deg, transparent, rgba(95,214,255,0.35), transparent);
transition: left 0.6s ease;
}
.pcon-submit-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,0.26); }
.pcon-submit-btn:hover::before { left: 100%; }
.pcon-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.pcon-form-success {
text-align: center;
padding: 5rem 2rem;
font-size: 1.05rem;
color: #333;
line-height: 2;
background: #fff;
border-radius: 14px;
}
.pcon-form-success::before {
content: '✓';
width: 68px;
height: 68px;
background: #5fd6ff;
color: #0a0a0a;
border-radius: 50%;
font-size: 2rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
animation: pconCheck 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes pconCheck { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (max-width: 900px) {
.pcon-cards { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 768px) {
.pcon-card { padding: 2rem 1.6rem 1.6rem; }
.pcon-form-grid { grid-template-columns: 1fr; }
/* Widen the form on mobile: trim the container & card side padding */
.pcon-container { padding: 0 1rem; }
.pcon-form { padding: 1.5rem 1.2rem; }
.pcon-step-label { flex-wrap: wrap; }
.pcon-back-btn { margin-left: 0; margin-top: 0.8rem; }
/* Submit button: stay on one line and fit the screen */
.pcon-form-submit { margin-top: 2.2rem; }
.pcon-submit-btn {
width: 100%;
max-width: 360px;
padding: 1.05rem 1.4rem;
letter-spacing: 0.1em;
font-size: 0.9rem;
}
}
/* ── Property grid in forms ── */
.pcon-property-grid { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.6rem; }
.pcon-prop-row { display: flex; align-items: center; gap: 1.2rem; }
.pcon-prop-label { width: 100px; font-size: 0.78rem; color: #555; flex-shrink: 0; }
.pcon-prop-input-wrap { display: flex; align-items: center; gap: 1rem; flex: 1; }
.pcon-input--sm { max-width: 160px; }
.pcon-postcode-link { font-size: 0.72rem; color: #555; text-decoration: none; white-space: nowrap; border-bottom: 1px solid #ccc; }
.pcon-postcode-link:hover { color: #111; }
.pcon-datetime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 0.6rem; }
.pcon-sub-label { display: block; font-size: 0.72rem; color: #888; margin-bottom: 0.4rem; }
.pcon-note { font-size: 0.72rem; color: #999; margin-top: 0.8rem; line-height: 1.6; }
.pcon-optional { font-size: 0.65rem; background: #ccc; color: #fff; padding: 1px 6px; margin-left: 6px; border-radius: 2px; font-weight: 700; }
.pcon-privacy-box { background: #f8f8f6; border: 1px solid #e0e0e0; border-radius: 2px; padding: 1.2rem; font-size: 0.75rem; color: #666; line-height: 1.8; max-height: 160px; overflow-y: auto; margin-bottom: 0.8rem; }
@media (max-width: 768px) {
.pcon-prop-row { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.pcon-prop-label { width: auto; }
.pcon-prop-input-wrap { flex-direction: column; align-items: flex-start; gap: 0.4rem; width: 100%; }
.pcon-datetime-grid { grid-template-columns: 1fr; }
}
/* ── Nav menu ja label ── */
.nav-link { display: flex; align-items: baseline; gap: 1.2rem; }
.nav-en { font-size: inherit; }
.nav-ja { font-size: 0.38em; letter-spacing: 0.2em; opacity: 0.5; font-weight: 400; white-space: nowrap; }
/* ── Header Nav ── */
.header-nav {
display: flex;
align-items: center;
gap: 2rem;
margin-left: auto;
margin-right: 2rem;
}
.header-nav-link {
font-size: 0.75rem;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.75);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s;
}
.header-nav-link:hover { color: #fff; }
.header-nav-link--cta {
border: 1px solid rgba(255,255,255,0.3);
padding: 0.45rem 1.1rem;
border-radius: 2px;
color: #fff;
}
.header-nav-link--cta:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.6);
}
/* PC のみ: セミナー情報 → お問い合わせ の間隔だけ詰める
(.header-nav の gap: 2rem は他の項目に維持しつつ、隣接する2つの CTA だけ
負マージンで 1rem 相当に縮める) */
.header-nav-link--cta + .header-nav-link--cta-solid {
margin-left: -1rem;
}
@media (max-width: 1024px) {
.header-nav { display: none; }
}
/* ── Header Nav hover ── */
.header-nav-link:not(.header-nav-link--cta) { position: relative; }
.header-nav-link:not(.header-nav-link--cta)::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 1px;
background: #fff;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.header-nav-link:not(.header-nav-link--cta):hover::after {
transform: scaleX(1);
transform-origin: left;
}
.header-nav-link--cta {
transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.header-nav-link--cta:hover {
transform: translateY(-1px);
}
/* CTAボタン白塗りバリエーション (白背景・黒文字) */
.header-nav-link--cta-solid,
.header-nav-link.header-nav-link--cta-solid {
background: #fff;
color: #111;
border-color: #fff;
}
.header-nav-link--cta-solid:hover {
background: rgba(255,255,255,0.85);
color: #111;
border-color: #fff;
}
/* ── Footer ── */
#footer { background: #0a0a0a; color: rgba(255,255,255,0.6); }
.footer-inner { max-width: 1300px; margin: 0 auto; padding: 5rem 2rem 3rem; display: grid; grid-template-columns: 280px 1fr; gap: 5rem; }
.footer-brand { display: flex; flex-direction: column; gap: 1.5rem; }
.footer-info { font-size: 0.75rem; line-height: 1.9; color: rgba(255,255,255,0.4); }
.footer-sns { display: flex; gap: 1rem; }
.footer-sns-link { color: rgba(255,255,255,0.4); transition: color 0.2s; display: flex; align-items: center; }
.footer-sns-link:hover { color: #fff; }
.footer-nav-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2.5rem 2rem; align-content: start; }
.footer-nav-col {}
.footer-nav-main { display: block; font-size: 0.88rem; font-weight: 700; color: #fff; text-decoration: none; letter-spacing: 0.08em; margin-bottom: 0.8rem; line-height: 1.3; }
.footer-nav-main span { display: block; font-size: 0.65rem; font-weight: 400; color: rgba(255,255,255,0.35); letter-spacing: 0.15em; margin-top: 0.2rem; }
.footer-nav-main:hover { color: rgba(255,255,255,0.7); }
.footer-nav-sub { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-nav-sub li a { font-size: 0.72rem; color: rgba(255,255,255,0.35); text-decoration: none; letter-spacing: 0.06em; transition: color 0.2s; }
.footer-nav-sub li a:hover { color: rgba(255,255,255,0.7); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); max-width: 1300px; margin: 0 auto; padding: 1.5rem 2rem; display: flex; align-items: center; gap: 2rem; }
.footer-policy { font-size: 0.72rem; color: rgba(255,255,255,0.3); text-decoration: none; }
.footer-policy:hover { color: rgba(255,255,255,0.6); }
.footer-copy { font-size: 0.72rem; color: rgba(255,255,255,0.25); margin-left: auto; }
.footer-pagetop { background: none; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.4); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; flex-shrink: 0; }
.footer-pagetop:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
@media (max-width: 1024px) { .footer-nav-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 768px) {
.footer-inner { grid-template-columns: 1fr; gap: 3rem; }
.footer-nav-grid { grid-template-columns: repeat(2,1fr); gap: 2rem 1.5rem; }
}
/* ── Contact Tel Banner ── */
.pcon-tel-banner {
margin-top: 2rem;
border: 1px solid #e0e0e0;
border-radius: 4px;
background: #fff;
overflow: hidden;
}
.pcon-tel-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.4rem 2rem;
text-decoration: none;
color: inherit;
transition: background 0.2s;
gap: 2rem;
}
.pcon-tel-inner:hover { background: #f8f8f6; }
.pcon-tel-left {
display: flex;
align-items: center;
gap: 1.2rem;
}
.pcon-tel-icon-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
background: #111;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
}
.pcon-tel-label {
display: block;
font-size: 0.72rem;
color: #888;
letter-spacing: 0.1em;
margin-bottom: 0.3rem;
}
.pcon-tel-num {
display: block;
font-size: 1.6rem;
font-weight: 900;
color: #111;
letter-spacing: 0.05em;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.pcon-tel-right {}
.pcon-tel-hours {
font-size: 0.78rem;
color: #888;
letter-spacing: 0.08em;
}
@media (max-width: 768px) {
.pcon-tel-inner { flex-direction: column; align-items: flex-start; padding: 1.2rem 1.5rem; gap: 0.8rem; }
.pcon-tel-num { font-size: 1.3rem; }
}
/* ── About Page ── */
.anchor-nav { background: #f8f8f6; border-bottom: 1px solid #e8e8e8; position: sticky; top: 0; z-index: 100; }
.anchor-nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; display: flex; gap: 0; overflow-x: auto; }
.anchor-nav-link { display: inline-block; padding: 1.1rem 1.8rem; font-size: 0.78rem; letter-spacing: 0.12em; color: #666; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.2s; }
.anchor-nav-link:hover { color: #111; border-bottom-color: #111; }
.about-section { padding: 6rem 0; }
.about-section--gray { background: #f8f8f6; }
.about-container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.about-section-header { margin-bottom: 3rem; }
.about-section-en { display: block; font-size: 0.72rem; letter-spacing: 0.45em; color: #a8a8a8; margin-bottom: 0.5rem; }
.about-section-ja { font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 800; color: #111; }
.about-section-note { display: block; margin-top: 0.7rem; font-size: 0.72rem; letter-spacing: 0.08em; color: #999; font-weight: 400; }
/* ── Philosophy Cards ── */
.philosophy-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.philosophy-card {
position: relative;
overflow: hidden;
min-height: 560px;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.philosophy-card.is-visible { opacity: 1; transform: translateY(0); }
.philosophy-card-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.8s ease;
}
.philosophy-card:hover .philosophy-card-img { transform: scale(1.04); }
.philosophy-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.15) 100%);
}
.philosophy-card-body {
position: relative;
z-index: 2;
padding: 2.5rem 2.2rem;
margin-top: auto;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.philosophy-num { font-size: 4rem; font-weight: 900; color: rgba(255,255,255,0.12); line-height: 1; letter-spacing: -0.04em; margin-bottom: 0.2rem; }
.philosophy-label { font-size: 0.62rem; letter-spacing: 0.38em; color: rgba(255,255,255,0.45); }
.philosophy-title { font-size: clamp(1.1rem,1.8vw,1.4rem); font-weight: 800; color: #fff; line-height: 1.3; }
.philosophy-lead { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.85); line-height: 1.8; }
.philosophy-body { font-size: 0.76rem; color: rgba(255,255,255,0.55); line-height: 1.9; }
@media (max-width: 768px) {
.philosophy-grid { grid-template-columns: 1fr; }
.philosophy-card { min-height: 380px; }
}
/* Company table */
.company-img-wrap { margin-bottom: 2.5rem; }
.company-table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
.company-table tr { border-bottom: 1px solid #e8e8e8; }
.company-table th { width: 180px; padding: 1.2rem 0; font-size: 0.82rem; font-weight: 600; color: #555; text-align: left; vertical-align: top; }
.company-table td { padding: 1.2rem 0 1.2rem 2rem; font-size: 0.88rem; color: #222; line-height: 1.8; }
/* 顧問先 HP リンクボタン */
.komon-cat { margin-top: 1.1rem; }
.komon-cat:first-child { margin-top: 0; }
.komon-cat strong { font-weight: 700; color: #1a1a1a; letter-spacing: 0.04em; }
.komon-row { display: flex; align-items: center; justify-content: flex-start; gap: 0.8rem; padding: 0.18rem 0; }
.komon-row > span { flex: 0 0 auto; }
.komon-link { display: inline-flex; align-items: center; gap: 0.35em; color: #1a1a1a; text-decoration: none; transition: opacity 0.2s; }
.komon-link-text { text-decoration: underline; text-underline-offset: 3px; }
.komon-link:hover { color: #1a1a1a; opacity: 0.6; }
.komon-ext-icon { flex-shrink: 0; position: relative; top: -1px; }
/* CEO Message */
.ceo-message { max-width: 800px; }
.ceo-message-lead { font-size: clamp(1.2rem,2vw,1.6rem); font-weight: 800; color: #111; line-height: 1.4; margin-bottom: 2rem; }
.ceo-message-body { font-size: 0.9rem; color: #444; line-height: 2.1; }
.ceo-message-body p { margin-bottom: 1.4rem; }
.ceo-sign { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #e8e8e8; display: flex; align-items: baseline; gap: 1rem; }
.ceo-sign-title { font-size: 0.78rem; color: #888; letter-spacing: 0.1em; }
.ceo-sign-name { font-size: 1.2rem; font-weight: 700; color: #111; letter-spacing: 0.05em; }
/* Access */
.access-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 3rem; align-items: start; }
.access-dl { display: grid; grid-template-columns: 100px 1fr; gap: 0; }
.access-dl dt { padding: 1rem 0; font-size: 0.78rem; font-weight: 600; color: #555; border-bottom: 1px solid #e8e8e8; }
.access-dl dd { padding: 1rem 0 1rem 1rem; font-size: 0.85rem; color: #222; line-height: 1.8; border-bottom: 1px solid #e8e8e8; }
.access-map { border-radius: 2px; overflow: hidden; }
@media (max-width: 768px) {
.access-grid { grid-template-columns: 1fr; }
.company-table th { width: 110px; }
.company-table td { padding-left: 1rem; }
}
/* ── About Nav Section ── */
.about-nav-section { width: 100%; }
.about-nav-grid { display: grid; grid-template-columns: repeat(3,1fr); height: 520px; }
.about-nav-card {
position: relative;
display: block;
text-decoration: none;
overflow: hidden;
}
.about-nav-card-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.about-nav-card:hover .about-nav-card-img { transform: scale(1.08); }
.about-nav-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 100%);
transition: background 0.4s ease;
}
.about-nav-card:hover .about-nav-card-overlay {
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.15) 100%);
}
.about-nav-card-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2.5rem 2.5rem;
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.4rem;
transform: translateY(8px);
transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.about-nav-card:hover .about-nav-card-content { transform: translateY(0); }
.about-nav-card-en {
font-size: 0.72rem;
letter-spacing: 0.38em;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
}
.about-nav-card-ja {
font-size: clamp(1.4rem,2.5vw,2rem);
font-weight: 800;
color: #fff;
line-height: 1.2;
}
.about-nav-card-arrow {
font-size: 1.2rem;
color: rgba(255,255,255,0.5);
margin-top: 0.5rem;
transition: transform 0.3s, color 0.3s;
display: inline-block;
}
.about-nav-card:hover .about-nav-card-arrow {
transform: translateX(6px);
color: #fff;
}
@media (max-width: 768px) {
.about-nav-grid { grid-template-columns: 1fr; height: auto; }
.about-nav-card { height: 260px; }
}
/* ── Recruit Hero Image Animation ── */
.hero-slide-bg {
animation: hero-zoom-in 8s ease-out forwards;
}
@keyframes hero-zoom-in {
0% { transform: scale(1.08); opacity: 0.7; }
100% { transform: scale(1.0); opacity: 1; }
}
.sr-hero, .pu-hero, .cn-hero, .biz-hero, .pcon-hero {
background: #0a0a0a !important;
position: relative;
overflow: hidden;
}
.sr-hero::before, .pu-hero::before, .cn-hero::before, .biz-hero::before, .pcon-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 100%, rgba(160,160,180,0.06) 0%, transparent 70%);
}
@media (max-width: 768px) {
.page-header { height: 280px; }
.page-header-en { font-size: clamp(2rem,10vw,3.5rem); }
}
/* ══ Global Font Override: Baskerville + Mincho ══ */
:root {
--font-en: 'Libre Baskerville', 'Baskerville', 'Times New Roman', Georgia, serif;
--font-ja: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', 'YuMincho', '游明朝', 'MS PMincho', 'MS 明朝', serif;
}
/* Base */
body {
font-family: var(--font-ja) !important;
}
/* All English headings and labels */
h1, h2, h3, h4, h5, h6,
.page-header-en,
.sr-hero-ja, .pu-hero-ja, .cn-hero-ja, .biz-hero-ja, .pcon-hero-ja,
.about-section-ja, .about-section-en,
.section-title-en,
.ob-en,
.pickup-title-en, .result-title-en,
.nav-en, .nav-link,
.header-nav-link,
.footer-nav-main,
.contact-banner-title,
.ceo-sign-name,
.philosophy-title,
.biz-section-title,
.biz-en,
.pd-hero-title,
.srd-hero-title,
.sr-hero-ja,
.pcon-hero-ja,
.cn-hero-ja,
.pu-hero-ja,
.sr-filter-btn, .pu-filter-btn, .cn-filter-btn, .cn-main-tab,
.pickup-title-en,
.result-title-en,
.skw-page__heading,
.col-title,
.biz-hero-ja {
font-family: var(--font-en) !important;
}
/* English labels/eyebrows */
.page-header-en,
.about-section-en,
.section-title-en,
.ob-label-text,
.ob-en,
.skw-eyebrow,
.philosophy-label,
.biz-num,
.biz-en,
.sr-hero-en, .pu-hero-en, .cn-hero-en, .biz-hero-en, .pcon-hero-en,
.result-item-name, .sr-item-name, .pu-item-name,
.pd-hero-title,
.srd-hero-title,
.cta4-card-title,
.about-nav-card-en,
.about-nav-card-ja,
.footer-nav-main,
.contact-banner-title,
.sticky-cta-tel-num,
.pcon-hero-ja,
.col-title,
.cn-card-title,
.pickup-item-name,
.pd-related-title,
.srd-related-title,
.result-cat-title,
.biz-section-lead,
.biz-contact-title,
.ceo-message-lead,
.philosophy-lead,
.ob-ja,
.section-title-ja,
.page-header-ja {
font-family: var(--font-en) !important;
}
/* Japanese body text stays mincho */
p, li, td, th, span, label, input, textarea, select, button,
.news-col-title-text,
.col-body,
.ceo-message-body,
.philosophy-body,
.biz-section-body,
.pd-table td,
.srd-table td,
.company-table td,
.pcon-card-desc,
.footer-info,
.access-dl dd {
font-family: var(--font-ja) !important;
}
/* ══ Page Hero Unified Format ══ */
/* About page standard: EN big → JA small */
.page-header-en {
font-size: clamp(2rem,5vw,4rem) !important;
font-weight: 400 !important;
font-family: 'Libre Baskerville', Baskerville, Georgia, serif !important;
color: #fff !important;
letter-spacing: 0.04em !important;
opacity: 0;
animation: pageHeaderFadeUp 0.9s cubic-bezier(0.4,0,0.2,1) 0.2s forwards;
}
.page-header-ja {
font-size: clamp(1.05rem, 2vw, 1.4rem) !important; /* hero-ja と統一（旧 0.82rem）。page-header系 全ページ共通 */
font-weight: 400 !important;
color: rgba(255,255,255,0.45) !important;
letter-spacing: 0.35em !important;
margin-top: 1rem !important;
opacity: 0;
animation: pageHeaderFadeUp 0.9s cubic-bezier(0.4,0,0.2,1) 0.4s forwards;
}
/* Fix page-specific heroes to EN big → JA small */
.sr-hero-en, .pu-hero-en, .cn-hero-en, .biz-hero-en, .pcon-hero-en {
font-size: clamp(2rem,5vw,4rem) !important;
font-weight: 400 !important;
font-family: 'Libre Baskerville', Baskerville, Georgia, serif !important;
color: #fff !important;
letter-spacing: 0.04em !important;
display: block !important;
order: 1;
opacity: 0;
animation: pageHeaderFadeUp 0.9s cubic-bezier(0.4,0,0.2,1) 0.2s forwards;
}
.sr-hero-ja, .pu-hero-ja, .cn-hero-ja, .biz-hero-ja, .pcon-hero-ja {
font-size: clamp(1.05rem, 2vw, 1.4rem) !important; /* 日本語サブタイトルを拡大（旧 0.82rem）。全ページ共通 */
font-weight: 400 !important;
font-family: 'Hiragino Mincho ProN', 'Yu Mincho', '游明朝', serif !important;
color: rgba(255,255,255,0.45) !important;
letter-spacing: 0.35em !important;
display: block !important;
order: 2;
opacity: 0;
animation: pageHeaderFadeUp 0.9s cubic-bezier(0.4,0,0.2,1) 0.4s forwards;
}
/* Ensure hero inner is flex column with EN on top */
.sr-hero-inner, .pu-hero-inner, .cn-hero-inner, .biz-hero-inner, .pcon-hero-inner {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
@keyframes pageHeaderFadeUp {
0% { opacity: 0; transform: translateY(18px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ── Mobile Hero Layout ── */
@media (max-width: 768px) {
.hero-content {
top: 40% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
}
.hero-news-widget,
.hero-ticker,
.hero-news,
.hero-bottom {
position: absolute !important;
top: 65% !important; /* お知らせ箱を少しだけ上へ（70%→65%） */
bottom: auto !important;
left: var(--container-pad) !important;
right: var(--container-pad) !important;
width: auto !important;
}
}
/* Hero tagline: slightly wider line spacing on mobile only */
@media (max-width: 768px) {
.hero-en.hero-tagline-slow {
line-height: 1.4 !important;
}
}
/* About page anchor nav: centered + wrap on mobile (no horizontal scroll) */
@media (max-width: 768px) {
.anchor-nav-inner {
height: auto !important; /* let the box grow so wrapped chips stay inside */
overflow-x: visible !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 0.4rem 0.4rem !important;
padding: 0.7rem 0.6rem !important;
}
.anchor-nav-link {
padding: 0.6rem 0.85rem !important;
font-size: 0.7rem !important;
white-space: nowrap;
}
}
/* ── Data Section (light theme to match other About sections) ── */
.data-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.data-card--wide { grid-column: span 2; }
.data-card {
background: #f8f8f6;
border: 1px solid #e8e8e8;
border-radius: 4px;
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
text-align: center;
}
.data-card-icon { color: #888; }
.data-label { font-size: 0.72rem; letter-spacing: 0.15em; color: #555; font-family: 'Hiragino Mincho ProN','Yu Mincho',serif; }
/* Ring */
.data-ring-wrap { position: relative; width: 120px; height: 120px; }
.data-ring { width: 120px; height: 120px; }
.data-ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.data-num { font-size: 1.8rem; font-weight: 700; color: #111; font-family: 'Libre Baskerville',Georgia,serif; line-height: 1; }
.data-unit { font-size: 0.72rem; color: #555; margin-top: 0.2rem; }
/* Ratio */
.data-ratio-wrap { width: 100%; }
.data-ratio-bar-outer { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #e0e0e0; }
.data-ratio-bar-m { width: 0; height: 100%; background: linear-gradient(to right, #555, #222); }
.data-ratio-bar-f { width: 0; height: 100%; background: #bbb; }
.data-ratio-labels { display: flex; justify-content: space-between; margin-top: 0.8rem; }
.data-ratio-label { font-size: 0.75rem; color: #555; }
.data-ratio-label strong { color: #111; font-size: 1.1rem; margin-left: 0.3rem; }
/* Age bars */
.data-age-wrap { display: flex; gap: 2rem; align-items: flex-end; height: 120px; }
.data-age-item { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.data-age-bar-wrap { height: 80px; display: flex; align-items: flex-end; }
.data-age-bar { width: 40px; height: 0; border-radius: 3px 3px 0 0; background: var(--bar-color); }
.data-age-sub { font-size: 0.62rem; color: #777; }
.data-age-num { font-size: 1.6rem; font-weight: 700; color: #111; font-family: 'Libre Baskerville',Georgia,serif; line-height: 1; }
.data-age-unit { font-size: 0.72rem; color: #555; }
/* Sales bar chart */
.data-bar-chart { display: flex; gap: 2rem; align-items: flex-end; height: 140px; width: 100%; justify-content: center; }
.data-bar-item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; flex: 1; max-width: 80px; }
.data-bar-wrap { height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; }
.data-bar-value { font-size: 0.7rem; color: #444; margin-bottom: 0.4rem; white-space: nowrap; font-weight: 600; }
.data-bar { width: 100%; height: 0; border-radius: 3px 3px 0 0; background: var(--bar-color); }
.data-bar-label { font-size: 0.72rem; color: #777; }
@media (max-width: 768px) {
.data-grid { grid-template-columns: repeat(2,1fr); }
.data-card--wide { grid-column: span 2; }
}
/* ── Data Section: icon gauge-fill animation ── */
.data-card-icon { position: relative; width: 48px; height: 48px; display: inline-flex; }
.data-card-icon > svg { display: block; width: 100%; height: 100%; color: #ccc; transition: color 0.6s ease; }
.data-card-icon > .data-icon-fill-overlay {
position: absolute;
inset: 0;
color: #111;
clip-path: inset(100% 0 0 0);
-webkit-clip-path: inset(100% 0 0 0);
transition: clip-path 1.8s cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 1.8s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.data-card.is-animated .data-icon-fill-overlay {
clip-path: inset(0 0 0 0);
-webkit-clip-path: inset(0 0 0 0);
}
/* ── Data Section v2: Water-fill container icons ── */
#data .data-card {
background: #f8f8f6;
border: 1px solid #e8e8e8;
border-radius: 4px;
padding: 2.5rem 1.5rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.4rem;
text-align: center;
}
#data .data-label {
font-size: 0.78rem;
letter-spacing: 0.15em;
color: #444;
font-family: 'Hiragino Mincho ProN','Yu Mincho',serif;
}
/* Big container shapes (the "icons" that fill with water) */
.data-shape {
position: relative;
overflow: hidden;
background: #ddd;
}
/* Sales bars: モダンなバーチャート風 (上部のみ控えめに角丸、底は直角) */
.data-shape--cylinder {
width: 72px;
height: 200px;
border-radius: 4px 4px 0 0;
}
/* Icon-shaped containers via mask-image (no border, shape from SVG silhouette) */
.data-shape--person {
width: 148px;
height: 205px;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.data-shape--male {
width: 110px;
height: 155px;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.data-shape--female {
width: 118px;
height: 166px;
transform: translateY(8px);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.data-shape--young {
width: 100px;
height: 150px;
transform: translateY(10px);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.data-shape--old {
width: 100px;
height: 150px;
transform: translateY(10px);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.data-shape--ring {
width: 160px;
height: 160px;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.data-shape-fill {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background: linear-gradient(to top, #111, #555);
transition: height 2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Water surface highlight */
.data-shape-fill::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
}
.data-card.is-animated .data-shape-fill {
height: var(--fill, 0%);
}
/* 有給取得率: 円ゲージ（水位フィルではなく、円周ストロークが回ってフルになる）。
既存 .loading-gauge と同じ SVG stroke-dashoffset 方式。寸法は .data-shape--ring を流用。 */
.data-shape--gauge {
background: transparent;
overflow: visible;
-webkit-mask: none;
mask: none;
}
.data-gauge-svg { width: 100%; height: 100%; display: block; }
.data-gauge-track,
.data-gauge-bar { fill: none; stroke-width: 11; }
.data-gauge-track { stroke: #ececec; }
.data-gauge-bar {
stroke: url(#vacGaugeGrad);
stroke-linecap: butt;
stroke-dasharray: 207.345; /* 円周 = 2π × r(33) */
stroke-dashoffset: 207.345; /* 0% = 空 */
transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
}
.data-card.is-animated .data-shape--gauge .data-gauge-bar {
stroke-dashoffset: 0; /* 100% = 円周を一周してフル */
}
/* Two-up shape layout (ratio + age) */
.data-shape-pair {
display: flex;
gap: 1.4rem;
justify-content: center;
align-items: flex-end;
}
/* Three-up shape layout (sales) */
.data-shape-trio {
display: flex;
gap: 1.6rem;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
}
.data-shape-trio-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.data-shape-trio-item .data-bar-value {
font-size: 0.78rem;
font-weight: 700;
color: #222;
}
.data-shape-trio-item .data-bar-label {
font-size: 0.7rem;
color: #777;
}
/* Number display below shapes */
.data-value-wrap {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.25rem;
}
.data-value-wrap--pair {
flex-direction: row;
gap: 1.4rem;
font-size: 0.82rem;
color: #444;
}
.data-value-wrap--pair strong {
color: #111;
font-size: 1.3rem;
margin-left: 0.2rem;
font-family: 'Libre Baskerville',Georgia,serif;
}
.data-num,
.data-num-inline {
font-family: 'Libre Baskerville',Georgia,serif;
font-weight: 700;
color: #111;
}
.data-num { font-size: 2.4rem; line-height: 1; }
.data-num-inline { font-size: 1.3rem; }
.data-unit { font-size: 0.9rem; color: #555; }
/* Data: 2 columns per row on tablet & below.
Uses #data specificity to override the later `.data-grid { repeat(4) }` base rule. */
@media (max-width: 1023px) {
#data .data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#data .data-card--wide { grid-column: span 2; }
}
/* Data: shrink the silhouette shapes (fluid via vw + aspect-ratio) so two cards
fit within a phone width without clipping on the right. */
@media (max-width: 768px) {
#data .data-grid { gap: 1rem; }
#data .data-card { padding: 1.6rem 0.9rem 1.3rem; gap: 1rem; }
#data .data-shape { height: auto; }
#data .data-shape--person { width: min(120px, 28vw); aspect-ratio: 130 / 180; }
#data .data-shape--male { width: min(100px, 20vw); aspect-ratio: 110 / 155; }
#data .data-shape--female { width: min(108px, 22vw); aspect-ratio: 118 / 166; }
#data .data-shape--young,
#data .data-shape--old { width: min(96px, 18vw); aspect-ratio: 100 / 150; }
#data .data-shape--ring { width: min(140px, 30vw); aspect-ratio: 1 / 1; }
#data .data-shape--cylinder { width: min(68px, 16vw); aspect-ratio: 80 / 200; }
#data .data-shape-pair { gap: 0.5rem; }
#data .data-shape-trio { gap: 0.7rem; }
#data .data-value-wrap--pair { gap: 0.6rem; font-size: 0.74rem; flex-wrap: wrap; }
#data .data-num { font-size: 1.6rem; }
#data .data-label { font-size: 0.72rem; line-height: 1.5; }
}
/* ── Profile Card Section ── */
.pcon-profile-btns {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 0.6rem;
}
.pcon-profile-btn {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 1rem 1.8rem;
background: #f8f8f6;
border: 1.5px solid #ddd;
border-radius: 2px;
font-size: 0.85rem;
font-weight: 600;
color: #333;
cursor: pointer;
font-family: inherit;
transition: all 0.22s;
}
.pcon-profile-btn:hover { border-color: #111; color: #111; background: #fff; }
.pcon-profile-btn.active { background: #111; border-color: #111; color: #fff; }
.pcon-profile-btn-icon { font-size: 1.1rem; flex-shrink: 0; }
/* 2行テキスト用（メイン＋サブ）— 任意改行を抑止して指定箇所だけで改行 */
.pcon-profile-btn--multi { align-items: center; text-align: left; line-height: 1.35; }
.pcon-profile-btn-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
word-break: keep-all;
overflow-wrap: anywhere;
}
.pcon-profile-btn-main { font-size: 0.85rem; font-weight: 600; }
.pcon-profile-btn-sub { font-size: 0.72rem; font-weight: normal; opacity: 0.7; }
@media (max-width: 768px) {
.pcon-profile-btn--multi { padding: 0.85rem 1rem; }
.pcon-profile-btn--multi .pcon-profile-btn-text { text-align: center; align-items: center; }
}
.pcon-profile-panel {
margin-top: 1.5rem;
padding: 1.5rem;
background: #f8f8f6;
border: 1px solid #e8e8e8;
border-radius: 2px;
}
.pcon-upload-area {
border: 2px dashed #ddd;
border-radius: 2px;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: border-color 0.2s;
margin-top: 0.8rem;
}
.pcon-upload-area:hover { border-color: #111; }
.pcon-upload-inner { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; color: #888; }
.pcon-upload-inner p { font-size: 0.85rem; line-height: 1.6; margin: 0; }
.pcon-upload-inner span { font-size: 0.72rem; color: #bbb; }
.pcon-upload-filename { font-size: 0.82rem; color: #111; font-weight: 600; margin-top: 0.8rem; display: none; }
.pcon-profile-fields { display: flex; flex-direction: column; gap: 1.5rem; }
.pcon-profile-field { display: flex; flex-direction: column; gap: 0.6rem; }
.pcon-select-group { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8rem 0; border-bottom: 1px solid #e8e8e8; }
.pcon-select-group:last-child { border-bottom: none; }
.pcon-select-label { font-size: 0.78rem; font-weight: 600; color: #444; letter-spacing: 0.05em; }
.pcon-owned-props { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.pcon-owned-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: #333; }
.pcon-input--xs { width: 60px !important; text-align: center; padding: 0.5rem 0.6rem !important; }
@media (max-width: 768px) {
.pcon-profile-btns { flex-direction: column; }
.pcon-profile-btn { width: 100%; justify-content: center; }
}
/* Profile Card — required validation states */
.pcon-profile-error { color: #c0392b; font-size: 0.8rem; font-weight: 600; margin: 0.8rem 0 0; }
.pcon-accordion-wrap.pcon-invalid .pcon-profile-btn { border-color: #c0392b; }
.pcon-accordion-wrap.pcon-invalid > .pcon-label { color: #c0392b; }
/* セクション見出し (form-grid内で全幅・下線付き) */
.pcon-section-heading {
font-size: 0.95rem;
font-weight: 600;
color: #111;
padding: 14px 0 10px;
margin-top: 8px;
border-top: 1px solid #e8e8e8;
letter-spacing: 0.05em;
}
/* 来店予約 — 3希望日時 */
.pcon-visit-pref { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.pcon-visit-pref-row {
display: grid;
grid-template-columns: 90px 1fr 1fr;
gap: 12px;
align-items: center;
}
.pcon-visit-pref-num {
font-size: 0.85rem;
font-weight: 600;
color: #444;
letter-spacing: 0.05em;
}
@media (max-width: 768px) {
.pcon-visit-pref-row {
grid-template-columns: 1fr;
gap: 8px;
padding: 12px;
background: #f8f8f6;
border-radius: 2px;
}
.pcon-visit-pref-num { font-size: 0.9rem; padding-bottom: 4px; }
}
/* ── Philosophy Value List ── */
.philosophy-num {
font-size: 1.4rem !important;
font-weight: 700 !important;
color: rgba(255,255,255,0.5) !important;
font-family: 'Libre Baskerville', Georgia, serif !important;
letter-spacing: 0.05em !important;
margin-bottom: 0.3rem !important;
}
.philosophy-value-list {
list-style: none;
padding: 0;
margin-top: 0.8rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.philosophy-value-list li {
font-size: 0.72rem;
color: rgba(255,255,255,0.5);
line-height: 1.7;
font-family: 'Hiragino Mincho ProN','Yu Mincho',serif;
}
.philosophy-value-list li strong {
display: inline-block;
color: rgba(255,255,255,0.75);
font-weight: 700;
margin-right: 0.5rem;
font-family: 'Hiragino Mincho ProN','Yu Mincho',serif;
}
/* ── Philosophy cards: Mission(black) / Vision(grey) / Value(white) + icons ── */
.philosophy-card::after { display: none; } /* solid colors now — drop the photo overlay */
.philosophy-card--mission .philosophy-card-img { background: #141414; }
.philosophy-card--vision .philosophy-card-img { background: #6b6b6b; }
.philosophy-card--value .philosophy-card-img { background: #ffffff; }
.philosophy-card--value { border: 1px solid #e8e8e8; }
.philosophy-icon { position: relative; z-index: 2; padding: 2.6rem 2.2rem 0; line-height: 0; }
.philosophy-icon svg { width: 64px; height: 64px; display: block; }
.philosophy-card--mission .philosophy-icon { color: rgba(255,255,255,0.92); }
.philosophy-card--vision .philosophy-icon { color: #ffffff; }
.philosophy-card--value .philosophy-icon { color: #141414; }
/* Vision: brighten text for legibility on grey */
.philosophy-card--vision .philosophy-label { color: rgba(255,255,255,0.8); }
.philosophy-card--vision .philosophy-lead { color: #ffffff; }
/* Value: dark text on white */
.philosophy-card--value .philosophy-num { color: rgba(0,0,0,0.16) !important; }
.philosophy-card--value .philosophy-label { color: rgba(0,0,0,0.55); }
.philosophy-card--value .philosophy-title { color: #111111; }
.philosophy-card--value .philosophy-lead { color: rgba(0,0,0,0.78); }
.philosophy-card--value .philosophy-value-list li { color: rgba(0,0,0,0.7); }
.philosophy-card--value .philosophy-value-list li strong { color: #111111; }
@media (max-width: 768px) {
.philosophy-icon { padding: 2rem 1.8rem 0; }
.philosophy-icon svg { width: 56px; height: 56px; }
}
/* ── Philosophy: 3 stacked full-width rows (1 col) + reveal animation ── */
.philosophy-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
.philosophy-card {
flex-direction: row;
align-items: stretch;
min-height: 230px;
}
.philosophy-icon {
flex: 0 0 26%;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.philosophy-icon svg { width: 88px !important; height: 88px !important; }
.philosophy-card-body {
margin-top: 0;
flex: 1 1 auto;
justify-content: center;
padding: 2.6rem 3rem 2.6rem 0;
}
/* Icon "pop" reveal in sync with the row's fade-up */
.philosophy-icon { opacity: 0; transform: scale(0.55); transition: opacity .55s ease .15s, transform .6s cubic-bezier(0.34,1.56,0.64,1) .15s; }
.philosophy-card.is-visible .philosophy-icon { opacity: 1; transform: scale(1); }
@media (max-width: 768px) {
.philosophy-card { flex-direction: column; min-height: 0; }
.philosophy-icon { flex: none; justify-content: flex-start; padding: 2rem 1.8rem 0; }
.philosophy-icon svg { width: 56px !important; height: 56px !important; }
.philosophy-card-body { padding: 1.4rem 1.8rem 2.2rem 1.8rem; }
}
/* ── Data section: supplied icons with a rising-gauge reveal (keeps icon detail) ── */
.data-shape--person { --ds-icon: url('/wp-content/uploads/2026/05/1d49fe22ec9e723a587d26f58ee3ca41.png'); }
.data-shape--male { --ds-icon: url('/wp-content/uploads/2026/05/91a4bad917f6a22deb0125b08139b38a.png'); }
.data-shape--female { --ds-icon: url('/wp-content/uploads/2026/05/4b6847666697cc6c8c130ea4bf41a9c2.png'); }
.data-shape--young { --ds-icon: url('/wp-content/uploads/2026/05/6803d9ff2c0285225563e43069436f22.png'); }
.data-shape--old { --ds-icon: url('/wp-content/uploads/2026/05/d7cb70a4af681867269f0afe35e01314.png'); }
.data-shape--person,
.data-shape--male, .data-shape--female,
.data-shape--young, .data-shape--old {
-webkit-mask: none !important;
mask: none !important;
background: none !important;
position: relative;
overflow: hidden;
}
/* base layer = faint "empty" icon */
.data-shape--person::before,
.data-shape--male::before, .data-shape--female::before,
.data-shape--young::before, .data-shape--old::before {
content: '';
position: absolute;
inset: 0;
background: var(--ds-icon) center / contain no-repeat;
opacity: 0.3;
}
/* fill layer = full/dark icon, revealed from the bottom up to --fill (rising gauge) */
.data-shape--person .data-shape-fill,
.data-shape--male .data-shape-fill, .data-shape--female .data-shape-fill,
.data-shape--young .data-shape-fill, .data-shape--old .data-shape-fill {
display: block !important;
position: absolute !important;
inset: 0 !important;
height: auto !important;
background: var(--ds-icon) center / contain no-repeat !important;
filter: brightness(0.45);
clip-path: inset(100% 0 0 0);
-webkit-clip-path: inset(100% 0 0 0);
transition: clip-path 1.6s cubic-bezier(0.4,0,0.2,1), -webkit-clip-path 1.6s cubic-bezier(0.4,0,0.2,1);
}
.data-shape--person .data-shape-fill::before,
.data-shape--male .data-shape-fill::before, .data-shape--female .data-shape-fill::before,
.data-shape--young .data-shape-fill::before, .data-shape--old .data-shape-fill::before { content: none !important; }
/* trigger the rise when the section scrolls into view */
.data-card.is-animated .data-shape--person .data-shape-fill,
.data-card.is-animated .data-shape--male .data-shape-fill,
.data-card.is-animated .data-shape--female .data-shape-fill,
.data-card.is-animated .data-shape--young .data-shape-fill,
.data-card.is-animated .data-shape--old .data-shape-fill {
clip-path: inset(calc(100% - var(--fill, 0%)) 0 0 0);
-webkit-clip-path: inset(calc(100% - var(--fill, 0%)) 0 0 0);
}
/* ── Data section: unify text & numbers, slower anim, sales bars without grey track ── */
/* bottom-anchor label+value so the numbers line up across the 4 stat cards */
#data .data-card:not(.data-card--wide) .data-label { margin-top: auto; }
/* consistent number size across all cards */
#data .data-num { font-size: 1.8rem !important; line-height: 1; }
/* inline numbers: baseline-align with their labels (no line-height shift) */
#data .data-num-inline,
#data .data-value-wrap--pair strong { font-size: 1.8rem !important; vertical-align: baseline; }
/* consistent sizing of the text around the numbers */
#data .data-unit { font-size: 0.85rem; }
#data .data-value-wrap--pair { font-size: 0.85rem; gap: 1.2rem; align-items: baseline; }
/* 売上バー: ゲージ(塗り)はそのまま・アニメ前のグレーの土台を消す */
#data .data-shape--cylinder { background: transparent !important; }
/* 全体的にアニメーションをゆっくりに */
#data .data-shape-fill { transition-duration: 2.4s !important; }
/* ── Data section: sales full-width on PC + rising trend arrow ── */
@media (min-width: 1024px) {
#data .data-card--wide { grid-column: 1 / -1; } /* PCは全幅 (スマホはそのまま) */
#data .data-card--wide .data-shape-trio { gap: 5rem; } /* 全幅なのでバーを広げる */
}
.data-shape-trio { position: relative; }
.data-trend {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
z-index: 4;
}
.data-trend-line, .data-trend-head {
fill: none;
stroke: #1a1a1a; /* モノトーンのデザインに合わせた配色 (調整可) */
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
/* 暗いバー上でも見えるよう淡いハロー＋「下から上へ、徐々にフェイドイン」する反転マスク */
.data-trend {
filter: drop-shadow(0 0 2px rgba(255,255,255,0.85));
-webkit-mask: linear-gradient(to top, #000 50%, transparent) bottom / 100% 0% no-repeat;
mask: linear-gradient(to top, #000 50%, transparent) bottom / 100% 0% no-repeat;
transition: -webkit-mask-size 1.6s cubic-bezier(0.33, 1, 0.68, 1) 1.9s,
mask-size 1.6s cubic-bezier(0.33, 1, 0.68, 1) 1.9s;
}
.data-card.is-animated .data-trend {
-webkit-mask-size: 100% 300%;
mask-size: 100% 300%;
}
/* ── Data fixes: number font unify + label one-line on PC ── */
/* 数字フォントを全カードで統一（Baskerville）— 男性6/女性4 が他と違う＆上下ズレを解消 */
#data .data-num,
#data .data-num-inline,
#data .data-value-wrap--pair strong {
font-family: 'Libre Baskerville', Georgia, serif !important;
vertical-align: baseline;
}
/* ラベルがPCで改行されないよう字間を詰める */
#data .data-label { letter-spacing: 0.05em; }
/* 数字をライニング数字に（4などが下がるオールドスタイル字形を解消） */
#data .data-num,
#data .data-num-inline,
#data .data-value-wrap--pair strong {
font-variant-numeric: lining-nums;
-webkit-font-feature-settings: "lnum" 1;
font-feature-settings: "lnum" 1;
}
/* 売上金額を大きく (sales amount larger) */
#data .data-shape-trio-item .data-bar-value {
font-size: 1.35rem;
font-weight: 700;
color: #111;
}
/* ── Philosophy: remove icons, enlarge Mission/Vision/Value, richer reveal ── */
#philosophy .philosophy-icon { display: none !important; }
#philosophy .philosophy-card-body { padding: 2.8rem 3rem; }
/* Mission / Vision / Value を大きく */
#philosophy .philosophy-num {
font-size: clamp(2.6rem, 6vw, 4.6rem) !important;
line-height: 1.02 !important;
margin-bottom: 0.6rem !important;
font-weight: 400 !important; /* 細めに */
letter-spacing: 0.01em !important;
}
#philosophy .philosophy-card--mission .philosophy-num,
#philosophy .philosophy-card--vision .philosophy-num { color: rgba(255,255,255,0.92) !important; }
#philosophy .philosophy-card--value .philosophy-num { color: rgba(0,0,0,0.88) !important; }
/* もっとアニメーション：見出しは左からスライドイン、本文は順に立ち上げ */
#philosophy .philosophy-num {
opacity: 0;
transform: translateX(-34px);
transition: opacity 0.85s ease, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
#philosophy .philosophy-card.is-visible .philosophy-num { opacity: 1; transform: none; transition-delay: 0.12s; }
#philosophy .philosophy-label,
#philosophy .philosophy-title,
#philosophy .philosophy-lead,
#philosophy .philosophy-value-list {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
#philosophy .philosophy-card.is-visible .philosophy-label { opacity: 1; transform: none; transition-delay: 0.34s; }
#philosophy .philosophy-card.is-visible .philosophy-title { opacity: 1; transform: none; transition-delay: 0.48s; }
#philosophy .philosophy-card.is-visible .philosophy-lead { opacity: 1; transform: none; transition-delay: 0.62s; }
#philosophy .philosophy-card.is-visible .philosophy-value-list { opacity: 1; transform: none; transition-delay: 0.76s; }
/* 日本語をもっと大きく */
#philosophy .philosophy-title { font-size: clamp(1.5rem, 2.8vw, 2.3rem) !important; }
#philosophy .philosophy-label { font-size: 0.92rem !important; letter-spacing: 0.22em !important; }
#philosophy .philosophy-lead { font-size: 1rem !important; line-height: 1.9; }
#philosophy .philosophy-value-list li { font-size: 0.82rem !important; }
/* ── Value カード: 5項目を見やすく（キーワードを見出し化＋区切り線で整列） ── */
#philosophy .philosophy-card--value .philosophy-value-list {
gap: 0 !important;
margin-top: 1.1rem !important;
}
#philosophy .philosophy-card--value .philosophy-value-list li {
padding: 0.8rem 0 !important;
border-top: 1px solid rgba(0,0,0,0.10);
font-size: 0.8rem !important;
line-height: 1.8 !important;
}
#philosophy .philosophy-card--value .philosophy-value-list li:last-child {
padding-bottom: 0 !important;
}
/* キーワードを独立した小見出しに（説明文と段を分ける）＋頭に短いアクセント線 */
#philosophy .philosophy-value-list li strong {
display: block !important;
margin: 0 0 0.25rem 0 !important;
font-size: 0.98rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
line-height: 1.35 !important;
color: #111 !important;
}
#philosophy .philosophy-card--value .philosophy-value-list li strong::before {
content: '';
display: inline-block;
width: 14px;
height: 2px;
background: #111;
vertical-align: middle;
margin-right: 0.55rem;
}
/* ── Sticky CTA Mobile Fix: スマホのみ1行・文字大きめ・短縮ラベル ── */
/* PC: フルテキスト表示 / スマホ: 短縮テキスト表示（下の @media で切替） */
.sticky-cta-label .cta-label-short { display: none; }
.sticky-cta-label .cta-label-full { display: inline; }
@media (max-width: 768px) {
.sticky-cta-label {
white-space: nowrap !important; /* 改行しない（1行） */
overflow: visible !important;
font-size: 0.72rem !important; /* 大きく（既存0.6rem → 0.72rem）。3ラベル共通サイズ */
}
.sticky-cta-label .cta-label-full { display: none !important; }
.sticky-cta-label .cta-label-short { display: inline !important; }
}
/* =====================================================
Seminar — colored status labels & date block
===================================================== */
.news-col-cat--upcoming {
background: #1d4ed8;
border-color: #1d4ed8;
color: #fff;
font-weight: 700;
font-size: 13px;
padding: 5px 14px;
letter-spacing: 0.14em;
}
.news-col-cat--past {
background: #94a3b8;
border-color: #94a3b8;
color: #fff;
font-weight: 500;
}
/* Past list items: gray-out (auto-archive visual) */
.news-col-item--past { opacity: 0.7; }
.news-col-item--past .news-col-title-text { color: var(--color-text-secondary); }
.news-col-item--past:hover { opacity: 1; }
/* Seminar date block: bigger main date + smaller time line */
.seminar-date-block {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 2px;
min-width: 110px;
}
.seminar-date-main {
font-family: var(--font-en);
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: 0.04em;
line-height: 1.2;
}
.seminar-date-main small {
font-size: 11px;
font-weight: 500;
margin-left: 4px;
color: var(--color-text-secondary);
}
.seminar-date-time {
font-family: var(--font-en);
font-size: 11px;
color: var(--color-text-secondary);
letter-spacing: 0.05em;
}
.news-col-item--past .seminar-date-main { color: var(--color-text-secondary); }
@media (max-width: 768px) {
.seminar-date-block { min-width: 0; }
.seminar-date-main { font-size: 13px; }
}
/* ===== CONTACT PAGE ===== */
.contact-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
margin-bottom: 48px;
border-bottom: 2px solid var(--color-border);
}
@media (max-width: 768px) {
.contact-tabs { grid-template-columns: repeat(2, 1fr); }
}
.contact-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 20px 12px;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
cursor: pointer;
transition: all var(--transition-base);
color: var(--color-text-secondary);
}
.contact-tab:hover { color: var(--color-text); }
.contact-tab.active {
color: var(--color-text);
border-bottom-color: var(--color-accent);
}
.contact-tab-en {
font-family: var(--font-en);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-accent);
}
.contact-tab-ja {
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.05em;
}
.contact-form-panel { display: none; }
.contact-form-panel.active { display: block; animation: fade-in 0.4s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.contact-form-inner { max-width: 800px; margin: 0 auto; }
/* CF7 フォームスタイル */
.cf7-wrap { display: flex; flex-direction: column; gap: 20px; }
.cf7-row { display: grid; gap: 20px; }
.cf7-2col { grid-template-columns: 1fr 1fr; }
.cf7-3col { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 768px) {
.cf7-2col, .cf7-3col { grid-template-columns: 1fr; }
}
.cf7-field { display: flex; flex-direction: column; gap: 8px; }
.cf7-field label {
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.05em;
color: var(--color-text);
}
.cf7-req {
display: inline-block;
font-size: 10px;
font-family: var(--font-en);
letter-spacing: 0.1em;
color: var(--color-bg);
background: var(--color-accent);
padding: 1px 6px;
margin-left: 6px;
vertical-align: middle;
}
.cf7-section-label {
font-family: var(--font-en);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-secondary);
padding: 16px 0 8px;
border-top: 1px solid var(--color-border);
margin-top: 8px;
}
.cf7-time-label {
font-size: 11px;
color: var(--color-text-secondary);
margin-top: 6px;
display: block;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
width: 100%;
padding: 12px 16px;
background: var(--color-bg-cream);
border: 1px solid var(--color-border);
border-radius: 0;
font-size: var(--fs-small);
font-family: var(--font-ja);
color: var(--color-text);
transition: border-color var(--transition-base);
appearance: none;
-webkit-appearance: none;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
outline: none;
border-color: var(--color-accent);
}
.wpcf7 select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
cursor: pointer;
}
.wpcf7 textarea { resize: vertical; min-height: 120px; }
.cf7-checkbox-wrap { padding: 8px 0; }
.cf7-checkbox-wrap label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: var(--fs-small);
}
.wpcf7 input[type="checkbox"] {
width: 18px;
height: 18px;
border: 1px solid var(--color-border);
background: var(--color-bg-cream);
cursor: pointer;
accent-color: var(--color-accent);
flex-shrink: 0;
}
.cf7-submit { margin-top: 16px; }
.wpcf7 input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 240px;
padding: 18px 48px;
background: var(--color-accent);
color: var(--color-bg);
font-family: var(--font-en);
font-size: var(--fs-small);
letter-spacing: 0.15em;
border: none;
cursor: pointer;
transition: all var(--transition-base);
}
.wpcf7 input[type="submit"]:hover { background: var(--color-text); }
.wpcf7-response-output {
margin-top: 24px;
padding: 16px 20px;
font-size: var(--fs-small);
border-left: 3px solid var(--color-accent);
}
.wpcf7-mail-sent-ok { color: var(--color-text); background: var(--color-bg-cream); }
.wpcf7-validation-errors { color: #c0392b; background: #fdf0f0; border-left-color: #c0392b; }
.wpcf7 .wpcf7-not-valid-tip { font-size: 11px; color: #c0392b; margin-top: 4px; }
/* =========================================================
Seminar — card layout & accordion apply form
========================================================= */
/* セミナー一覧の見出し (開催予定 / 過去のセミナー を大きく) */
.news-2col--seminar .news-col-count {
font-size: 17px;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: 0.06em;
}
.news-2col--seminar .news-col-header {
padding: 18px 0;
}
@media (max-width: 600px) {
.news-2col--seminar .news-col-count { font-size: 15px; }
}
.seminar-card-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.seminar-card {
display: flex;
gap: 18px;
padding: 18px;
background: #fff;
border: 1px solid var(--color-border);
text-decoration: none;
color: inherit;
transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.seminar-card:hover {
box-shadow: 0 10px 28px rgba(0,0,0,0.07);
transform: translateY(-2px);
border-color: var(--color-accent);
}
/* Calendar block (refined / editorial style)
塗り帯 → 上端アクセントラインのみに変更。日付を Libre Baskerville の
大きめセリフ数字に。ゴールドのヘアラインで小区切り、曜日は italic、
年は字間広めで小さく。開催予定=ブルー (#1d4ed8) / 終了=グレー (#94a3b8). */
.seminar-cal {
flex-shrink: 0;
width: 112px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center; /* 縦方向に内容を中央寄せ */
text-align: center;
background: #fff;
border: 1px solid #d8dbe2;
border-top: 3px solid #1d4ed8;
border-radius: 2px;
padding: 10px 0; /* 上下均等の余白に変更 */
overflow: hidden;
}
.seminar-cal-month {
background: transparent;
color: #1d4ed8;
font-family: 'Hiragino Mincho ProN','Yu Mincho',serif;
font-size: 19px; /* 14px → 19px に拡大 */
font-weight: 600;
letter-spacing: 0.06em;
padding: 0 0 4px;
line-height: 1.1;
}
.seminar-cal-day {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 50px;
font-weight: 700;
line-height: 0.95;
padding: 2px 0 0;
color: var(--color-text-primary);
letter-spacing: -0.01em;
font-feature-settings: "lnum" 1, "tnum" 1;
position: relative;
}
.seminar-cal-day::after {
content: '';
display: block;
width: 26px;
height: 1px;
background: linear-gradient(90deg, transparent, #c9a13a 50%, transparent);
margin: 8px auto 2px;
}
.seminar-cal-dow {
font-family: 'Libre Baskerville', Georgia, serif;
font-style: italic;
font-size: 11px;
color: var(--color-text-secondary);
padding: 0;
line-height: 1.2;
letter-spacing: 0.02em;
}
.seminar-cal-year {
font-family: 'Libre Baskerville', Georgia, serif;
font-size: 10px;
color: #94a3b8;
letter-spacing: 0.22em;
padding: 2px 0 0;
border-top: none;
margin: 0;
font-feature-settings: "lnum" 1;
}
/* Body */
.seminar-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.seminar-card-status { display: flex; gap: 8px; }
.seminar-card-title {
font-size: 0.95rem;
font-weight: 600;
line-height: 1.55;
margin: 2px 0 4px;
color: var(--color-text-primary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.seminar-card-meta {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: var(--color-text-secondary);
line-height: 1.4;
}
.seminar-card-meta-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.seminar-card-meta-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
opacity: 0.65;
}
.seminar-card-meta-sep {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.seminar-card-cta {
margin-top: 6px;
font-family: var(--font-en);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--color-accent);
font-weight: 600;
}
/* Past variant: ニュートラルグレー (background 塗り帯ではなく上端ラインのみ) */
.seminar-card--past .seminar-cal {
border-color: #e2e5ec;
border-top-color: #94a3b8;
}
.seminar-card--past .seminar-cal-month {
background: transparent;
color: #94a3b8;
}
.seminar-card--past .seminar-cal-day::after {
background: linear-gradient(90deg, transparent, #94a3b8 50%, transparent);
opacity: 0.4;
}
.seminar-card--past { opacity: 0.7; }
.seminar-card--past:hover { opacity: 1; }
.seminar-card--past .seminar-card-cta { color: #64748b; }
/* Empty state */
.seminar-card--empty {
background: transparent;
border-style: dashed;
justify-content: center;
color: var(--color-text-secondary);
font-size: 12px;
padding: 32px;
}
.seminar-card--empty:hover {
box-shadow: none;
transform: none;
border-color: var(--color-border);
}
@media (max-width: 600px) {
.seminar-card { gap: 14px; padding: 14px; }
.seminar-cal { width: 88px; padding: 8px 0; }
.seminar-cal-month { font-size: 16px; padding: 0 0 3px; }
.seminar-cal-day { font-size: 38px; padding: 2px 0 0; }
.seminar-cal-day::after { width: 20px; margin: 6px auto 2px; }
.seminar-cal-dow { font-size: 10px; }
.seminar-cal-year { font-size: 9px; letter-spacing: 0.2em; padding: 2px 0 0; }
.seminar-card-title { font-size: 0.9rem; }
}
/* ============================================
Seminar Apply (single page accordion form)
============================================ */
.seminar-apply {
margin-top: 48px;
border: 1px solid var(--color-border);
background: #fff;
}
.seminar-apply-toggle {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 22px 26px;
background: var(--color-accent);
color: #fff;
border: none;
font-family: inherit;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.06em;
cursor: pointer;
transition: background 0.3s ease;
}
.seminar-apply-toggle:hover { background: #b08940; }
.seminar-apply-toggle-icon {
font-size: 1.5rem;
font-weight: 300;
line-height: 1;
}
.seminar-apply-panel {
padding: 32px 26px;
background: var(--color-bg-cream);
}
/* 申込対象セミナーのサマリー (アコーディオン展開時の冒頭) */
.seminar-apply-summary {
margin-bottom: 28px;
padding: 18px 22px;
background: #fff;
border-left: 3px solid var(--color-accent);
}
.seminar-apply-summary-label {
display: inline-block;
font-family: var(--font-en);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--color-accent);
font-weight: 700;
text-transform: uppercase;
margin-bottom: 8px;
}
.seminar-apply-summary-title {
font-size: 0.95rem;
font-weight: 600;
line-height: 1.55;
margin: 0 0 8px;
color: var(--color-text-primary);
}
.seminar-apply-summary-date {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 0.85rem;
color: var(--color-text-secondary);
}
.seminar-apply-summary-date .seminar-card-meta-icon {
width: 15px;
height: 15px;
opacity: 0.8;
}
.seminar-apply-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 24px;
}
.seminar-apply-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.seminar-apply-field--full {
grid-column: 1 / -1;
}
.seminar-apply-submit { text-align: center; }
.seminar-apply-submit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 260px;
padding: 16px 40px;
background: var(--color-text-primary, #111);
color: #fff;
border: none;
font-family: var(--font-ja);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.1em;
cursor: pointer;
transition: opacity 0.3s ease;
}
.seminar-apply-submit-btn:hover { opacity: 0.85; }
.seminar-apply-submit-btn:disabled { opacity: 0.5; cursor: wait; }
.seminar-apply-success {
text-align: center;
padding: 32px 16px;
color: var(--color-text-primary);
font-size: 0.95rem;
line-height: 1.7;
}
@media (max-width: 600px) {
.seminar-apply-toggle { padding: 18px 20px; font-size: 0.92rem; }
.seminar-apply-panel { padding: 22px 18px; }
.seminar-apply-grid { grid-template-columns: 1fr; gap: 14px; }
}
/* ── Data section: mobile alignment fix (icons / numbers / labels) ──
各カードのアイコン形状・サイズが異なるため、スマホ2カラム時に
ラベル/数字の縦位置が隣カードとズレる。アイコン領域に固定高を与え、
その下にラベル/数値を flex-end で揃えて行間を一致させる。 */
@media (max-width: 768px) {
/* card 内を3段グリッド化: [icon area] / [label] / [value] */
#data .data-card {
display: grid;
grid-template-rows: auto auto auto;
align-items: end;
justify-items: center;
gap: 0.7rem;
padding: 1.6rem 0.6rem 1.3rem;
}
/* icon 領域に共通の最小高を確保し、形状差による高さブレを吸収 */
#data .data-card > .data-shape,
#data .data-card > .data-shape-pair,
#data .data-card > .data-shape-trio {
min-height: 130px;
display: flex;
align-items: flex-end;
justify-content: center;
}
/* pair (男女比 / 年齢) を中央揃え＆等間隔に */
#data .data-shape-pair { gap: 0.9rem; width: 100%; }
/* 数値+ラベル(男性6/女性4 等)の改行を防止し、横並びを維持 */
#data .data-value-wrap--pair {
flex-wrap: nowrap;
gap: 1.2rem;
font-size: 0.78rem;
white-space: nowrap;
}
/* ラベルとバリューを中央寄せ＆等幅で揃える */
#data .data-label,
#data .data-value-wrap {
width: 100%;
text-align: center;
justify-content: center;
}
/* wide(売上推移) はラベル位置を独立に下端へ */
#data .data-card--wide .data-shape-trio { min-height: 170px; }
}
/* 極小幅 (≤480px) はカード内余白とアイコンが両立しにくいので1カラム化 */
@media (max-width: 480px) {
#data .data-grid { grid-template-columns: 1fr; }
#data .data-card--wide { grid-column: span 1; }
/* 1カラムになったぶんアイコンを大きく戻す */
#data .data-shape--person { width: 150px; aspect-ratio: 130 / 180; }
#data .data-shape--male { width: 124px; aspect-ratio: 110 / 155; }
#data .data-shape--female { width: 136px; aspect-ratio: 118 / 166; }
#data .data-shape--young,
#data .data-shape--old { width: 240px; aspect-ratio: 120 / 180; }
#data .data-shape--ring { width: 170px; aspect-ratio: 1 / 1; }
#data .data-shape--cylinder { width: 78px; aspect-ratio: 80 / 200; }
#data .data-card > .data-shape,
#data .data-card > .data-shape-pair { min-height: 150px; }
#data .data-card > .data-shape-trio { min-height: 190px; }
}
/* ── 社員年齢カード: アイコンが暗すぎ問題の調整 ──
--fill: 100% で dark layer (filter: brightness(0.45)) が全面を覆い
silhouette がほぼ真っ黒になっていた。年齢カードは min/max を示すだけで
ゲージとしての意味は薄いので、fill 側の暗さを緩めて
ベース outline を強めに見せる。サイズも一段大きく。 */
.data-shape--young,
.data-shape--old {
width: 120px;
height: 180px;
}
/* young/old だけ silhouette 間の余白を詰める (data-type=age のみ)
gap を 0 にした上で old に負マージンを与え、PNG の透明パディング込みで
さらに肩が触れるほど近づける */
.data-card[data-type="age"] .data-shape-pair { gap: 0 !important; }
.data-card[data-type="age"] .data-shape--old { margin-left: -28px; }
/* 男女比 (ratio): male/female を少し大きく & 距離をぐっと詰める */
.data-card[data-type="ratio"] .data-shape--male { width: 128px; height: 180px; }
.data-card[data-type="ratio"] .data-shape--female { width: 138px; height: 194px; }
.data-card[data-type="ratio"] .data-shape-pair { gap: 0 !important; }
.data-card[data-type="ratio"] .data-shape--female { margin-left: -16px; }
/* base outline をはっきり見せる */
.data-shape--young::before,
.data-shape--old::before {
opacity: 0.6;
}
/* fill layer は filter を解除して PNG 本来の色を維持
(brightness<1 だとワイシャツの白ピクセルがグレーに転ぶため) */
.data-shape--young .data-shape-fill,
.data-shape--old .data-shape-fill {
filter: none !important;
}
/* タブレット (≤768px) でも他カードと比べ一段大きく */
@media (max-width: 768px) {
#data .data-shape--young,
#data .data-shape--old { width: min(170px, 34vw); aspect-ratio: 120 / 180; }
/* age カードだけ pair gap をさらに詰める (前段の 0.9rem を上書き) */
#data .data-card[data-type="age"] .data-shape-pair { gap: 0 !important; }
#data .data-card[data-type="age"] .data-shape--old { margin-left: -20px; }
/* age 用に icon 行を一段背高くしてシルエットを余裕を持って収める */
#data .data-card[data-type="age"] > .data-shape-pair { min-height: 170px; }
/* ratio: スマホでも一段大きく & さらに近づける */
#data .data-card[data-type="ratio"] .data-shape--male { width: min(120px, 24vw); aspect-ratio: 110 / 155; }
#data .data-card[data-type="ratio"] .data-shape--female { width: min(128px, 26vw); aspect-ratio: 118 / 166; }
#data .data-card[data-type="ratio"] .data-shape-pair { gap: 0 !important; }
#data .data-card[data-type="ratio"] .data-shape--female { margin-left: -10px; }
}
/* ── Card content order: Label → Icon → Value ──
HTML 構造 (icon → label → value) は変えず、CSS order だけで表示順を
1. 見出し 2. 画像 3. 数字 に変更。flex/grid のどちらでも有効。 */
#data .data-card > .data-label { order: 1; }
#data .data-card > .data-shape,
#data .data-card > .data-shape-pair,
#data .data-card > .data-shape-trio { order: 2; }
#data .data-card > .data-value-wrap { order: 3; }
/* ── PC: 社員数 / 男女比 / 社員年齢 / 有給 のアイコン縦位置を揃え ──
元は flex column + 各 .data-shape が固有の高さ → カード毎に画像と
ラベル位置が縦にズレる。non-wide カードを grid 化し icon 行を 220px に
固定して align-items: end で下端揃え (＝画像自体も少し下に降りる)。 */
@media (min-width: 769px) {
#data .data-card:not(.data-card--wide) {
display: grid;
grid-template-rows: auto 220px auto; /* label → icon (固定高) → value */
justify-items: center;
align-items: end;
gap: 1rem;
padding-top: 2rem;
padding-bottom: 1.8rem;
}
/* grid 化したことで .data-shape / .data-shape-pair は cell 内で
bottom 揃いになる (align-items: end が継承) */
#data .data-card:not(.data-card--wide) > .data-shape,
#data .data-card:not(.data-card--wide) > .data-shape-pair {
align-self: end;
}
/* 社員数 (count) の person アイコンだけ視覚的に少し下げる */
#data .data-card[data-type="count"] .data-shape--person {
transform: translateY(14px);
}
}
/* ── データセクション: 全カードのラベルを同サイズ & 同じ縦位置に固定 ──
ラベル文字数の差 (社員数 vs 有給取得率（年5日以上）等) で row1 高さが
バラついて icon/value の縦位置が揃わない問題を解消。
min-height でラベル行を予約 + flex で下端揃え → どのカードでも
ラベル底辺・アイコン下端・数値位置が完全一致。 */
#data .data-label {
font-size: 0.95rem;
min-height: 2.9em;
line-height: 1.45;
display: flex;
align-items: flex-end;
justify-content: center;
letter-spacing: 0.08em;
}
/* data-value-wrap--pair (社員年齢 / 男女比) の各項目内で
「最年少 22歳」「男性 6」がスペース折り返しで分断されないよう
各 span 内を nowrap に固定 */
#data .data-value-wrap--pair > span {
white-space: nowrap;
}
@media (max-width: 768px) {
#data .data-label {
font-size: 0.82rem;
min-height: 2.7em;
}
}
/* ── Data section: subtle gold shimmer (constantly moving) ──
::before + overflow:hidden 方式は card 内幅(≈193px)より広い ratio pair(250px)を
クリップしてしまうため、background-image 方式に変更。
border-radius で自然にクリップされるので overflow:hidden は不要。 */
#data .data-card {
position: relative;
background:
linear-gradient(115deg,
transparent 25%,
rgba(201, 161, 58, 0.20) 40%,
rgba(255, 215, 102, 0.36) 50%,
rgba(201, 161, 58, 0.20) 60%,
transparent 75%
) -100% 0% / 300% 100% no-repeat,
linear-gradient(#f8f8f6, #f8f8f6);
animation: data-card-shimmer 4.5s linear infinite;
}
@keyframes data-card-shimmer {
0% { background-position: -100% 0%, 0 0; }
100% { background-position: 200% 0%, 0 0; }
}
/* 5 枚の位相を 0.9 秒ずつズラして 4.5 秒サイクル内で順番に走らせる */
#data .data-card:nth-child(1) { animation-delay: 0s; }
#data .data-card:nth-child(2) { animation-delay: 0.9s; }
#data .data-card:nth-child(3) { animation-delay: 1.8s; }
#data .data-card:nth-child(4) { animation-delay: 2.7s; }
#data .data-card:nth-child(5) { animation-delay: 3.6s; }
@media (prefers-reduced-motion: reduce) {
#data .data-card { animation: none; }
}