/**
 * コンポーネントスタイル
 * 合同会社SFR ウェブサイト
 * 
 * このファイルには、再利用可能なUIコンポーネントの
 * スタイルが含まれます（アニメーション、ホバー効果、テーブルなど）
 */

/* ============================================
   フェードアップアニメーション
   スクロール時に要素が下からフェードインする効果
   ============================================ */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s var(--ease-out-expo);
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ヒーローセクションは即座に表示 */
#top .fade-up,
#top .fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: none;
}

/* アニメーションの遅延設定 */
.fade-up.transition-delay-100 {
    transition-delay: 0.1s;
}

.fade-up.transition-delay-200 {
    transition-delay: 0.2s;
}

.fade-up.transition-delay-300 {
    transition-delay: 0.3s;
}

.fade-up.transition-delay-500 {
    transition-delay: 0.5s;
}

.fade-up.transition-delay-700 {
    transition-delay: 0.7s;
}

.fade-up.delay-100 {
    transition-delay: 0.1s;
}

.fade-up.delay-200 {
    transition-delay: 0.2s;
}

/* ============================================
   画像リビールアニメーション
   画像が左から右へクリップパスで現れる効果
   ============================================ */
.reveal-image {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s var(--ease-out-expo);
}

.reveal-image.is-visible {
    clip-path: inset(0 0 0 0);
}

/* ============================================
   ホバーライン効果
   リンクにホバーした時に下線がアニメーションで表示される
   ============================================ */
.hover-line::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}

.hover-line:hover::after {
    width: 100%;
}

/* ============================================
   テーブルスタイル
   データ表示用のテーブルコンポーネント
   ============================================ */

/* 会社情報テーブル */
.company-table th,
.company-table td {
    padding: 1.5rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}

.company-table tr:last-child th,
.company-table tr:last-child td {
    border-bottom: none;
}

/* 料金表テーブル */
.price-table th,
.price-table td {
    padding: 1.25rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}

.price-table tr:last-child th,
.price-table tr:last-child td {
    border-bottom: none;
}

/* FAQテーブル */
.faq-table th,
.faq-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}

.faq-table tr:last-child th,
.faq-table tr:last-child td {
    border-bottom: none;
}

/* データテーブル */
.data-table th,
.data-table td {
    padding: 1.25rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}

/* ポリシーテーブル */
.policy-table th,
.policy-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    vertical-align: top;
}

.policy-table tr:last-child th,
.policy-table tr:last-child td {
    border-bottom: none;
}

/* ============================================
   フォームスタイル
   入力フィールド、セレクトボックス、テキストエリア
   ============================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid rgba(26, 26, 26, 0.2);
    border-radius: 2px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

/* セレクトボックス専用スタイル */
select {
    min-height: 3.5rem;
    padding: 1rem 3rem 1rem 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231A1A1A' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: #CC5500;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23CC5500' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
}

/* IE向けのセレクトボックススタイル */
select::-ms-expand {
    display: none;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: #CC5500;
}

/* ============================================
   カード・エリアカードスタイル
   ============================================ */
.area-card {
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}

.area-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

/* ============================================
   アコーディオン・詳細表示
   FAQなどの折りたたみ表示用
   ============================================ */
details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details[open] summary ~ * {
    animation: sweep 0.3s ease-in-out;
}

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

/* ============================================
   ポリシーセクション専用スタイル
   ============================================ */
.policy-section {
    padding-top: 60px; /* 固定ヘッダー/アンカーリンク用のオフセット */
    margin-top: -60px;
}

/* ============================================
   404ページ専用スタイル
   ============================================ */
/* 404ページ用の特大見出し */
.text-fluid-h1-404 {
    font-size: clamp(3rem, 15vw, 12rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

/* 404ページ用の見出し */
.text-fluid-h2-404 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.2;
}

/* 背景の404数字のドリフトアニメーション */
@keyframes drift {
    from {
        transform: translate(0, 0) rotate(0deg);
    }
    to {
        transform: translate(20px, -20px) rotate(2deg);
    }
}

.animate-drift {
    animation: drift 10s ease-in-out infinite alternate;
}

/* ============================================
   特定商取引法ページ専用スタイル
   ============================================ */
/* 開示テーブルスタイル */
.disclosure-table {
    width: 100%;
    border-collapse: collapse;
}

.disclosure-table th,
.disclosure-table td {
    padding: 1.5rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    vertical-align: top;
}

.disclosure-table th {
    width: 30%;
    font-weight: 700;
    font-size: 0.9rem;
    color: #595955;
    background: rgba(26, 26, 26, 0.02);
}

.disclosure-table td {
    font-size: 1rem;
    line-height: 1.7;
}

/* スティッキーナビゲーション（サイドバー） */
.sticky-nav {
    position: sticky;
    top: 80px;
    height: fit-content;
}