/* ==============================================
   WAKO-DO Landing Page Custom Styles
   ============================================== */

/* スムーススクロール */
html {
    scroll-behavior: smooth;
}

/* ヘッダースクロール時の背景変更 */
#header.scrolled {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-bottom-color: #E5E7EB;
}

/* モバイル専用ヘッダースタイル */
@media (max-width: 768px) {
    #header {
        box-shadow: none;
        border-bottom: 1px solid rgba(229, 231, 235, 0.6);
        backdrop-filter: blur(8px);
        background-color: rgba(255, 255, 255, 0.98);
    }
    
    #header.scrolled {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
        border-bottom-color: #E5E7EB;
        background-color: rgba(255, 255, 255, 1);
    }
}

/* サービスタブ */
.service-tab-btn {
    color: #6B7280;
}

.service-tab-btn.active {
    background: linear-gradient(135deg, #2E7FD8 0%, #1E5BA8 100%);
    color: white;
    font-weight: 600;
}

/* パートナータブ */
.partner-tab-btn {
    color: #6B7280;
}

.partner-tab-btn.active {
    background: linear-gradient(135deg, #2E7FD8 0%, #1E5BA8 100%);
    color: white;
    font-weight: 600;
}

/* フロータブ */
.flow-tab-btn {
    color: #6B7280;
}

.flow-tab-btn.active {
    background: linear-gradient(135deg, #2E7FD8 0%, #1E5BA8 100%);
    color: white;
    font-weight: 600;
}

/* FAQ アコーディオン */
.faq-question.active i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.faq-answer.show {
    max-height: 500px;
    transition: max-height 0.5s ease-in, padding 0.3s ease-in;
}

/* ページトップボタン */
#scroll-top {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#scroll-top.show {
    opacity: 1;
    visibility: visible;
}

/* ホバーアニメーション */
.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}

/* グラデーション背景 */
.gradient-bg-blue {
    background: linear-gradient(135deg, #2E7FD8 0%, #1E5BA8 100%);
}

.gradient-bg-orange {
    background: linear-gradient(135deg, #FF8C42 0%, #E66A1E 100%);
}

.gradient-bg-yellow {
    background: linear-gradient(135deg, #FFD166 0%, #F4B942 100%);
}

/* カスタムスクロールバー */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #2E7FD8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1E5BA8;
}

/* フォーカススタイル */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #2E7FD8;
    box-shadow: 0 0 0 3px rgba(46, 127, 216, 0.1);
}

/* ボタンアニメーション */
button,
a.button {
    transition: all 0.3s ease;
}

/* レスポンシブ画像 */
img {
    max-width: 100%;
    height: auto;
}

/* テキスト選択色 */
::selection {
    background: #2E7FD8;
    color: white;
}

::-moz-selection {
    background: #2E7FD8;
    color: white;
}

/* アニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

/* ローディングアニメーション */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading {
    animation: spin 1s linear infinite;
}

/* プリント用スタイル */
@media print {
    header,
    footer,
    #scroll-top,
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    a {
        text-decoration: underline;
        color: #000;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/* レスポンシブ調整 - モバイル版（375px基準） */
@media (max-width: 768px) {
    /* ビューポート設定 */
    html, body {
        font-size: 14px;
        line-height: 1.6;
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* タイポグラフィ */
    h1 {
        font-size: 24px;
        line-height: 1.4;
        font-weight: 700;
    }
    
    h2 {
        font-size: 20px;
        line-height: 1.5;
        font-weight: 700;
    }
    
    h3 {
        font-size: 18px;
        line-height: 1.5;
        font-weight: 600;
    }
    
    p, body {
        font-size: 14px;
        line-height: 1.6;
    }
    
    small, .text-sm {
        font-size: 12px;
    }
    
    /* ヘッダー */
    #header {
        height: auto;
        min-height: 56px;
        padding: 0;
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 100%;
        margin: 0;
    }
    
    #header nav {
        padding: 12px 20px;
        max-width: 100%;
        margin: 0;
    }
    
    #header .text-xl,
    #header .text-2xl {
        font-size: 16px;
        font-weight: 700;
    }
    
    /* メインコンテンツのトップ余白 */
    main.pt-20 {
        padding-top: 56px;
    }
    
    /* コンテンツエリア */
    .container {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
        width: 100%;
    }
    
    /* モバイルメニュー */
    #mobile-menu {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    
    /* ヒーローセクション */
    #hero {
        min-height: 200px;
        padding: 40px 20px;
        width: 100vw;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    #hero h1 {
        font-size: 24px;
        margin-bottom: 16px;
    }
    
    #hero p {
        font-size: 14px;
        margin-bottom: 24px;
    }
    
    /* ボタン要素 */
    .bg-wako-orange,
    .bg-wako-blue,
    .bg-white,
    a[class*="bg-"] {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 14px;
        width: 100%;
        max-width: 335px;
        margin: 0 auto;
    }
    
    /* タッチターゲット */
    button,
    a,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* カードコンポーネント */
    .bg-white.rounded-lg {
        margin-bottom: 16px;
        padding: 16px;
        border-radius: 12px;
    }
    
    /* グリッドレイアウト - モバイルは1カラム */
    .grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* セクション間スペーシング */
    section {
        padding: 40px 20px;
    }
    
    .py-20 {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .mb-16 {
        margin-bottom: 40px;
    }
    
    /* サービスカード */
    #services .grid {
        gap: 20px;
    }
    
    #services a {
        width: 100%;
        max-width: 335px;
        margin: 0 auto;
    }
    
    /* モバイルメニュー */
    #mobile-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        padding: 0 20px;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(8px);
        border-top: 1px solid rgba(229, 231, 235, 0.5);
    }
    
    #mobile-menu.show {
        max-height: 500px;
        transition: max-height 0.5s ease-in;
        padding: 16px 20px 20px 20px;
    }
    
    #mobile-menu a {
        padding: 12px 0;
        font-size: 16px;
        display: block;
        color: #333333;
        font-weight: 500;
    }
    
    #mobile-menu a:hover {
        color: #2E7FD8;
    }
    
    /* フォーム要素 */
    input,
    textarea,
    select {
        font-size: 16px; /* iOSズーム防止 */
        padding: 12px 16px;
        width: 100%;
    }
    
    /* テーブル・リスト */
    table {
        font-size: 14px;
    }
    
    /* 画像 */
    img {
        width: 100%;
        height: auto;
    }
}

/* iPhone SE / 小型デバイス用 (375px以下) */
@media (max-width: 375px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    h1 {
        font-size: 22px;
    }
    
    h2 {
        font-size: 18px;
    }
    
    h3 {
        font-size: 16px;
    }
    
    section {
        padding: 32px 16px;
    }
}

/* アクセシビリティ: フォーカス表示 */
a:focus,
button:focus {
    outline: 2px solid #2E7FD8;
    outline-offset: 2px;
}

/* ダークモード対応(オプション) */
@media (prefers-color-scheme: dark) {
    /* 必要に応じてダークモード用のスタイルを追加 */
}

/* パフォーマンス最適化 */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* ユーティリティクラス */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.box-shadow-lg {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.border-gradient {
    border-image: linear-gradient(135deg, #2E7FD8, #FF8C42) 1;
}

/* モバイル用カラーパレット */
:root {
    --color-primary: #6B5ACD;
    --color-background: #FFFFFF;
    --color-text-primary: #333333;
    --color-text-secondary: #666666;
    --color-accent: #5B4ABF;
    --color-border: #E0E0E0;
}

/* モバイル用スペーシング変数 */
@media (max-width: 768px) {
    :root {
        --spacing-section: 40px;
        --spacing-element: 16px;
        --spacing-padding: 16px;
        --spacing-margin: 20px;
    }
}

/* フォームバリデーション */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
    border-color: #EF4444;
}

input:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown) {
    border-color: #10B981;
}