@charset "UTF-8";
/* =========================================
   ベース設定 (data専用)
   ========================================= */

/* =========================================
   コンテンツ
   ========================================= */
/* Hero Section */
.data-hero { padding-top: 200px; padding-bottom: 100px; text-align: center; }
.hero-label { display: block; font-family: var(--font-gothic); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--accent-gold); margin-bottom: 20px; font-weight: 700; }
.hero-title { font-family: var(--font-mincho); font-size: 3.5rem; line-height: 1.2; margin-bottom: 40px; color: var(--text-color); }
.hero-desc { max-width: 600px; margin: 0 auto; font-size: 0.95rem; line-height: 2.2; color: #666; }

/* Data Grid System */
.data-category { margin-bottom: 120px; }
.cat-header { display: flex; align-items: center; gap: 20px; margin-bottom: 50px; }
.cat-title { font-family: var(--font-mincho); font-size: 1.8rem; color: var(--accent-main); }
.cat-line { flex: 1; height: 1px; background: var(--accent-sub); }

.grid-3, .grid-env { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.data-box { border: 1px solid var(--accent-sub); padding: 40px 30px; position: relative; background: #fff; transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; justify-content: space-between; min-height: 220px; }
.data-box:hover { border-color: var(--accent-gold); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.03); }

.data-group { background: #fafafa; text-align: center; border: 1px solid #eee; }
.data-group ul { width: 100%; display: flex; flex-wrap: wrap; gap: 5px; padding: 20px; }
.data-group li { width: calc(100% / 3 - 5px); }

.d-label { font-size: 0.85rem; letter-spacing: 0.1em; color: #888; font-weight: 500; margin-bottom: 10px; display: block; }
.d-main { font-family: var(--font-mincho); color: var(--accent-main); line-height: 1; margin: 20px 0; display: flex; align-items: baseline; }
.d-num { font-size: 3.8rem; font-weight: 500; margin-right: 5px; }
.d-unit { font-size: 1.2rem; font-family: var(--font-gothic); font-weight: 400; color: #666; }
.d-desc { font-size: 0.85rem; color: #666; line-height: 1.8; margin-top: auto; }

.text-gold { color: var(--accent-gold); }
.gender-graph { width: 100%; height: 6px; background: #eee; margin-top: 20px; position: relative; }
.gender-bar { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent-main); }
.gender-labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.8rem; color: #888; }
.icon-box { font-size: 2.5rem; color: var(--accent-sub); margin-bottom: 20px; transition: 0.4s; }
.data-box:hover .icon-box { color: var(--accent-gold); }

/* 社員旅行用 (6枚対応) */
.trip-box { grid-column: 1 / -1; background: #fafafa; border-color: var(--trip-green); display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; overflow: hidden; min-height: 450px; }
.trip-content { padding: 40px; z-index: 10; }
.trip-visual { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; perspective: 1000px; }

.polaroid { background: #fff; padding: 8px 8px 25px 8px; box-shadow: 2px 4px 12px rgba(0,0,0,0.15); position: absolute; transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1); width: 42%; aspect-ratio: 0.85; border: 1px solid #eee; top: 50%; left: 50%; margin-top: -25%; margin-left: -21%; }
.polaroid img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.1); }

.polaroid:nth-child(1) { transform: rotate(-15deg) translate(-60px, -30px); z-index: 3; }
.polaroid:nth-child(2) { transform: rotate(8deg) translate(40px, -50px); z-index: 2; }
.polaroid:nth-child(3) { transform: rotate(-5deg) translate(0px, 20px); z-index: 5; }
.polaroid:nth-child(4) { transform: rotate(12deg) translate(70px, 40px); z-index: 4; }
.polaroid:nth-child(5) { transform: rotate(-20deg) translate(-50px, 60px); z-index: 1; }
.polaroid:nth-child(6) { transform: rotate(3deg) translate(-10px, -10px); z-index: 6; }

.trip-box:hover .polaroid:nth-child(1) { transform: rotate(-18deg) translate(-90px, -50px) scale(1.05); }
.trip-box:hover .polaroid:nth-child(2) { transform: rotate(12deg) translate(80px, -70px) scale(1.05); }
.trip-box:hover .polaroid:nth-child(3) { transform: rotate(-2deg) translate(0px, 40px) scale(1.1); z-index: 10; }
.trip-box:hover .polaroid:nth-child(4) { transform: rotate(15deg) translate(110px, 60px) scale(1.05); }
.trip-box:hover .polaroid:nth-child(5) { transform: rotate(-25deg) translate(-80px, 90px) scale(1.05); }
.trip-box:hover .polaroid:nth-child(6) { transform: rotate(5deg) translate(-20px, -20px) scale(1.08); z-index: 9; }

.visual-strip { width: 100%; height: 300px; background: #f4f4f4; margin: 100px 0; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.visual-strip img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); opacity: 0.6; }
.visual-text { position: absolute; font-family: var(--font-mincho); font-size: 2rem; color: var(--accent-main); z-index: 2; letter-spacing: 0.2em; text-align: center; }

@media (max-width: 768px) {
    .hero-title { font-size: 2.2rem; }
    .grid-3, .grid-env { grid-template-columns: 1fr; gap: 20px; }
    .d-num { font-size: 3rem; }
    .data-group ul { padding: 4% 4% 2%; gap: 2%; }
    .data-group li { width: 48%; margin-bottom: 2%; }
    .trip-box { grid-template-columns: 1fr; padding: 0; min-height: auto; }
    .trip-content { padding: 40px 30px 0; order: 2; margin-bottom: 40px; }
    .trip-visual { order: 1; min-height: 350px; margin-top: 30px; overflow: visible; }
    .polaroid { width: 35%; }
    .trip-box:hover .polaroid:nth-child(1) { transform: rotate(-18deg) translate(-60px, -30px); }
    .trip-box:hover .polaroid:nth-child(2) { transform: rotate(12deg) translate(50px, -40px); }
    .trip-box:hover .polaroid:nth-child(4) { transform: rotate(15deg) translate(60px, 40px); }
    .trip-box:hover .polaroid:nth-child(5) { transform: rotate(-25deg) translate(-50px, 60px); }
}