@charset "UTF-8";

/* ==========================================================================
   1. サイト全体共通設定 (Base & Typography)
   ========================================================================== */
body {
    font-family: "Noto Sans JP", sans-serif;
    color: #1e293b; /* slate-800 */
    background-color: #ffffff;
    overflow-x: hidden;
    line-height: 1.6;
}

/* テキスト選択時の色 */
::selection {
    background-color: #0d9488; /* teal-600 */
    color: #ffffff;
}

/* 明朝体クラス */
.font-mincho {
    font-family: "Noto Serif JP", "Yu Mincho", "MS Mincho", serif;
}

/* 縦書き設定 */
.vertical-rl {
    writing-mode: vertical-rl;
}

/* 文字間隔・行間のカスタム（ヒーロー用など） */
.tracking-widest-xl { letter-spacing: 0.2em !important; }
.tracking-widest-2xl { letter-spacing: 0.35em !important; }
.leading-loose-xl { line-height: 2.0 !important; }
.leading-loose-2xl { line-height: 1.5 !important; }

/* ==========================================================================
   2. ヘッダー・ナビゲーション (Header & Nav)
   ========================================================================== */
#header {
    transition: all 0.5s ease-in-out;
}

/* スクロール時のヘッダーコンパクト化 */
.is-scrolled .nav-line {
    height: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0;
}

.is-scrolled .desktop-nav-link {
    font-size: 0.875rem !important;
}

.is-scrolled #header-logo img {
    transform: scale(0.85);
    transform-origin: left center;
}

/* アニメーションの基本設定 */
.nav-line, .desktop-nav-link, #header-logo img {
    transition: all 0.3s ease-in-out;
}

/* アクティブなメニューの緑色表示（PC版） */
.nav-active .desktop-nav-link {
    color: #0d9488 !important; /* teal-600 */
}
.nav-active .nav-line {
    background-color: #0d9488 !important;
    height: 12px !important;
}

/* モバイルメニューのアニメーション */
#mobile-menu {
    transform: translateY(-10px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s;
}

#mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   3. スクロール連動アニメーション (Reveal Animation)
   ========================================================================== */
.reveal {
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.reveal-up { transform: translateY(60px); }
.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }

.reveal.active {
    opacity: 1;
    transform: translate(0, 0);
}

/* 遅延用設定 */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* ==========================================================================
   4. トップページ固有 (Top Page Only)
   ========================================================================== */
/* 背景スライドショー（ヒーローセクション用） */
.bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    opacity: 0;
    animation: slideFadeZoom 18s infinite;
    z-index: 0;
}

/* 3枚の背景画像を順番に表示するための遅延設定（CSS側で管理） */
.bg-slide:nth-child(1) { animation-delay: 0s; }
.bg-slide:nth-child(2) { animation-delay: 6s; }
.bg-slide:nth-child(3) { animation-delay: 12s; }

@keyframes slideFadeZoom {
    0% { opacity: 0; transform: scale(1.05); }
    8% { opacity: 1; transform: scale(1.04); }
    33% { opacity: 1; transform: scale(1.01); }
    41% { opacity: 0; transform: scale(1.0); }
    100% { opacity: 0; transform: scale(1.0); }
}

/* 登場時のスタッガーアニメーション (PCメニュー) */
.home-page .nav-item {
    opacity: 0;
    transform: translateY(-20px);
    animation: navFadeDown 0.8s ease-out forwards;
}

@keyframes navFadeDown {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   5. 施工実績・その他ページ (Works & Others)
   ========================================================================== */
/* 実績カードのホバーエフェクト */
.work-card img {
    transition: transform 0.5s ease;
}

.work-card:hover img {
    transform: scale(1.05);
}

/* 汎用ボタンスタイル */
.btn-teal {
    display: inline-block;
    background-color: #0d9488;
    color: #ffffff;
    font-weight: 500;
    padding: 1rem 3.5rem;
    transition: background-color 0.3s;
    letter-spacing: 0.1em;
    border-radius: 2px;
}

.btn-teal:hover {
    background-color: #0f766e;
}

/* --- 施工実績プレビュー用スライドアニメーション --- */
.works-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: simpleFade 15s infinite;
}

/* 3枚の画像を順番に表示するための遅延設定 */
.works-slide-img:nth-child(1) { animation-delay: 0s; }
.works-slide-img:nth-child(2) { animation-delay: 5s; }
.works-slide-img:nth-child(3) { animation-delay: 10s; }

@keyframes simpleFade {
    0% { opacity: 0; }
    10% { opacity: 1; }
    33% { opacity: 1; }
    43% { opacity: 0; }
    100% { opacity: 0; }
}

/* 一文字アニメーション用 */
@keyframes charFadeIn {
    0% { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.animate-char-fade {
    opacity: 0; /* 初期状態は透明 */
    animation: charFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}