/* =================================
   Top Page Styles - トップページ専用スタイル
   ================================= */

/* --- Hero Section (Slideshow) --- */
.hero { position: relative; height: 70vh; overflow: hidden; background-color: #333; padding: 0; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 122, 255, 0.2); z-index: 1; }
#video-container, .slideshow-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.8s ease-in-out; }
#intro-video { width: 100%; height: 100%; object-fit: cover; }
#video-container { opacity: 1; z-index: 3; }
.slideshow-container { opacity: 0; z-index: 2; }
.hero.show-slider #video-container { opacity: 0; }
.hero.show-slider .slideshow-container { opacity: 1; }
.slides { display: flex; height: 100%; }
.slide { height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8); }
.hero-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; text-align: center; color: var(--background-color); text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5); width: 90%; }
.hero-content h1 { font-size: 3.5em; font-weight: 800; margin-bottom: 10px; color: var(--background-color); }
.hero-content p { font-size: 1.3em; max-width: 600px; margin: 0 auto; }

/* --- Works Section (Craft Gallery) --- */
#works { background-color: var(--light-gray); }
.section-title { text-align: center; font-size: 2.5em; font-weight: 700; }
.craft-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; }
.craft-card { background: var(--background-color); border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: var(--text-color); display: flex; flex-direction: column; }
.craft-card:hover { transform: translateY(-10px); box-shadow: 0 12px 25px rgba(0, 122, 255, 0.15); }
.craft-card-image-wrapper { width: 100%; height: 220px; overflow: hidden; }
.craft-card-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.craft-card:hover .craft-card-image-wrapper img { transform: scale(1.05); }
.craft-card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.craft-card-tag { color: #ffffff; padding: 4px 10px; border-radius: 5px; font-size: 0.75em; font-weight: 600; display: inline-block; margin-bottom: 12px; }
.tag-mechanical { background-color: #007AFF; }
.tag-bosch { background-color: #FF3B30; }
.tag-kirakira { background-color: #FFCC00; color: #1d1d1f; }
.tag-other { background-color: #34C759; }
.craft-card h3 { margin-bottom: 10px; font-size: 1.3em; }
.craft-card p { font-size: 0.9em; line-height: 1.5; flex-grow: 1; }
.craft-card-image-wrapper {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative; /* ← ★ position: relative; を追記 */
}
.image-badge {
    /* 基本設定 */
    position: absolute; /* 親要素(.craft-card-image-wrapper)を基準に配置 */
    background-color: #d40dba; /* リボンの色 */
    color: #ffffff; /* 文字の色 */
    text-align: center;
    
    /* 文字と見た目の調整 */
    padding: 6px 0;
    font-size: 0.8em;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    
    /* リボンを右上に配置し、回転させる */
    top: 20px;
    right: -30px;
    width: 140px; /* リボンの幅 */
    transform: rotate(45deg); /* 45度傾ける */
    
    z-index: 2; /* 画像より手前に表示 */
}


/* --- レスポンシブ (トップページ専用) --- */
@media (max-width: 768px) {
    .hero { height: 60vh; }
    .hero-content h1 { font-size: 2.5em; }
    .hero-content p { font-size: 1.1em; }

}