/*
styles.css

このファイルは index.html のインライン <style> を分離したものです。
各セクションは用途ごとにコメントを付けています。

セクション:
- ベースフォント
- グラデーション背景
- アニメーション（浮遊・フェード・タイピング）
- サービスカード・ボタンのスタイル
- 波背景（SVG）
- パララックス用トランスフォーム
- ガラス風（glass-effect）
- スクロールインジケーター
*/

/* ベースフォント */
* {
    font-family: 'Noto Sans JP', sans-serif;
}

/* グラデーション系ユーティリティ */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.ocean-gradient {
    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 50%, #00b894 100%);
}

/* 浮遊アニメーション（背景の丸要素などに使用） */
.floating-animation {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* フェードイン（上方向） */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* サービスカード（背景・ホバー） */
.service-card {
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* プライマリボタン */
.btn-primary {
    background: linear-gradient(45deg, #74b9ff, #0984e3);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(116, 185, 255, 0.4);
}

/* 波の背景（底部のデコレーション） */
.wave-bg {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200 120L0 16.48V0h1200v120z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x;
    height: 60px;
    background-size: 1200px 60px;
}

/* パララックス用ユーティリティ */
.parallax-scroll {
    transform: translateY(0);
    transition: transform 0.3s ease-out;
}

/* タイピング風アニメーション（heroの説明文） */
.typing-effect {
    overflow: hidden;
    border-right: 3px solid;
    white-space: nowrap;
    animation: typing 3s steps(40, end), blink-caret 0.5s step-end infinite;
}

@keyframes typing { from { width: 0 } to { width: 100% } }

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #74b9ff }
}

/* ガラス風効果（半透明 + ブラー） */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ページ上部のスクロールインジケーター */
.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #74b9ff, #0984e3);
    transform-origin: left;
    z-index: 1000;
}

/* 必要に応じてここに追加のモジュールスタイルを追記してください */

/* animation-delay ユーティリティクラス */
.delay-05s { animation-delay: 0.5s; }
.delay-1s  { animation-delay: 1s; }
.delay-2s  { animation-delay: 2s; }
.delay-4s  { animation-delay: 4s; }

/* 追加: アニメーションの速さやタイミングを調整したい場合はここを編集してください */