/* index.html専用のスタイル */
.hero { position: relative; width: 100%; height: 100vh; overflow: hidden; background: #000; }
.hero__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.hero__video video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover; }
.hero__content-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 6vw; box-sizing: border-box; }
.hero__text { color: white; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); padding-left: 150px; box-sizing: border-box; position: relative; bottom: 80px; }
.hero__text .highlight { font-size: 8rem; color: #72AEE6; margin-bottom: 10px; font-family: 'Teko', sans-serif; font-weight: 700; letter-spacing: 2px; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); }
.hero__text .sub { font-size: 1.4rem; line-height: 1.8; max-width: 600px; }
.hero__achievements { position: absolute; bottom: 5vh; right: calc(6vw + 10px); display: flex; gap: 20px; z-index: 5; flex-wrap: wrap; justify-content: flex-end; width: auto; max-width: calc(100% - (6vw * 2)); }
.achievement-item { display: flex; align-items: center; background-color: rgba(10, 20, 40, 0.8); padding: 20px 15px; border-radius: 25px; color: #f5f5f5; }
.oukan-icon { width: 60px; height: 60px; margin-right: 12px; object-fit: contain; }
.achievement-text { font-size: 1rem; font-weight: 600; }

/* ★★★ サイドバーと共存するためのスタイルを追加 ★★★ */
.main-layout .content-wrapper { padding: 80px 40px; }

.introduction-block { text-align: center; margin-bottom: 120px; }
.introduction-block .decorated-heading { background: linear-gradient(135deg, #1d2b3c 0%, #2c3e50 100%); padding: 50px 30px; border-radius: 15px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0,0,0,0.1); margin-bottom: 60px; }
.decorated-heading .line-1 { display: block; font-size: 1.8rem; font-weight: 400; color: rgba(255, 255, 255, 0.8); margin-bottom: 20px; letter-spacing: 2px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
.decorated-heading .line-2 { display: block; font-size: 2.8rem; font-weight: 700; color: #fff; letter-spacing: 2px; text-shadow: 2px 2px 5px rgba(0,0,0,0.4); }
.decorated-heading .highlight-creation { background: linear-gradient(45deg, #a8c7fa, #72AEE6); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; padding: 0 5px; }
.introduction-block img { width: 100%; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); }

.content-block { display: flex; align-items: stretch; gap: 80px; margin-bottom: 120px; padding-top: 100px; position: relative; }
.content-block:last-child { margin-bottom: 0; }
.content-block[id] { scroll-margin-top: 100px; }
.content-block .left { flex: 1.5; padding-left: 40px; box-sizing: border-box; }
.content-block .right { flex: 1; }

.section-heading { position: absolute; top: 0; left: 40px; z-index: 10; }
.section-heading-text { font-size: 5rem; font-weight: bold; color: #72AEE6; white-space: nowrap; }
.section-description { font-size: 1.4rem; font-weight: 500; line-height: 1.7; margin-bottom: 40px; }
.content-image { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.1); }
.feature-list { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.feature-item { display: flex; align-items: center; padding: 20px; background-color: #fff; border: 1px solid #e8e8e8; border-radius: 12px; text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.feature-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); border-color: #a8c7fa; }
.feature-icon { font-size: 1.8rem; color: #72AEE6; margin-right: 20px; width: 40px; text-align: center; }
.feature-text { flex-grow: 1; }
.feature-text h3 { margin: 0 0 5px 0; font-size: 1.2rem; color: #0A1E3E; }
.feature-text p { margin: 0; font-size: 0.9rem; color: #555; line-height: 1.6; }
.feature-arrow { font-size: 1.2rem; color: #c4c7c5; transition: color 0.2s; }
.feature-item:hover .feature-arrow { color: #72AEE6; }

@media (max-width: 900px) {
    .hero__text { padding-left: 0; text-align: center; bottom: 20px; }
    .hero__text .highlight { font-size: 4.5rem; }
    .hero__text .sub { font-size: 1.1rem; margin: 0 auto; }
    .content-wrapper { padding: 80px 20px; }
    .introduction-block .decorated-heading { padding: 30px 15px; }
    .decorated-heading .line-1 { font-size: 1.2rem; }
    .decorated-heading .line-2 { font-size: 1.8rem; }
    .content-block { flex-direction: column; gap: 40px; }
    .content-block .left, .section-heading { padding-left: 0; left: 0; }
    .section-description { font-size: 1.2rem; max-width: 100%; }
}