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

/* =========================================
   コンテンツ
   ========================================= */
/* Hero Section */
.pj-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-lead { max-width: 700px; margin: 0 auto 60px; font-size: 0.95rem; line-height: 2.2; color: #666; }

/* Anchor Buttons */
.anchor-nav { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.anchor-btn { display: inline-flex; align-items: center; justify-content: center; width: 220px; padding: 15px 0; border: 1px solid var(--accent-main); color: var(--accent-main); font-size: 0.9rem; letter-spacing: 0.1em; background: transparent; position: relative; overflow: hidden; font-weight: 500; }
.anchor-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: var(--accent-main); z-index: -1; transition: 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.anchor-btn:hover { color: #fff; }
.anchor-btn:hover::after { width: 100%; }
.anchor-btn i { margin-left: 10px; font-size: 0.8em; }

/* Content Layouts */
.content-section { border-top: 1px solid var(--accent-sub); }
.content-grid { display: grid; grid-template-columns: 40% 55%; gap: 5%; align-items: center; }
.content-grid.reverse { grid-template-columns: 55% 40%; }
.content-grid.reverse .txt-area { order: 2; }
.content-grid.reverse .img-area { order: 1; }

.cat-tag { display: inline-block; font-size: 0.75rem; border: 1px solid var(--accent-gold); color: var(--accent-gold); padding: 5px 15px; margin-bottom: 20px; letter-spacing: 0.1em; }
.section-h { font-family: var(--font-mincho); font-size: 2.2rem; line-height: 1.4; margin-bottom: 30px; }
.section-desc { font-size: 0.95rem; line-height: 2.2; color: #555; margin-bottom: 30px; text-align: justify; }

.img-box { position: relative; width: 100%; aspect-ratio: 16/10; background: #f0f0f0; }
.img-box::after { content: ''; position: absolute; top: 20px; right: -20px; width: 100%; height: 100%; border: 1px solid var(--accent-main); z-index: -1; transition: 0.4s; }
.content-grid.reverse .img-box::after { right: auto; left: -20px; }

.content-grid:hover .img-box::after { top: 10px; right: -10px; }
.content-grid.reverse:hover .img-box::after { top: 10px; left: -10px; }

.ai-bg { background: linear-gradient(180deg, #fff 0%, #f4f7f8 100%); }
.tv-bg { background: #fff; }
.sdgs-bg { background: #fafafa; }

.link-text { display: inline-flex; align-items: center; border-bottom: 1px solid #333; padding-bottom: 3px; font-size: 0.9rem; margin-top: 10px; }
.link-text i { margin-left: 10px; font-size: 0.8em; transition: 0.3s; }
.link-text:hover i { transform: translateX(5px); }

@media (max-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .anchor-btn { width: 100%; margin-bottom: 10px; }
    .content-grid, .content-grid.reverse { grid-template-columns: 1fr; gap: 40px; }
    .content-grid.reverse .txt-area { order: unset; }
    .content-grid.reverse .img-area { order: unset; }
    .img-box::after { display: none; }
    .section-h { font-size: 1.8rem; }
}