/*
Theme Name: TokenLife
Theme URI: https://tokenlife-amber.vercel.app
Author: Touken Life Service
Description: 株式会社東建ライフサービス 公式サイトテーマ
Version: 1.0
Text Domain: tokenlife
*/

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left.visible, .reveal-left.active { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-right.visible, .reveal-right.active { opacity: 1; transform: translateX(0); }

/* Vertical text */
.vertical-text { writing-mode: vertical-rl; }

/* Sticky recruit button */
.sticky-recruit {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

/* Bubble animations */
.bubble-field { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.bubble {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0));
    opacity: 0.5;
    filter: blur(0.5px);
    animation: float 16s ease-in-out infinite;
}
.bubble.bubble-warm {
    background: radial-gradient(circle at 30% 30%, rgba(197,149,0,0.25), rgba(197,149,0,0));
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-18px); }
    100% { transform: translateY(0px); }
}

/* ── ページローディング ── */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}
#page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#page-loader .loader-logo {
    width: 90px;
    height: auto;
    animation: loader-pulse 1.8s ease-in-out infinite;
}
@keyframes loader-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.93); }
}
#page-loader .loader-ring {
    width: 52px;
    height: 52px;
    border: 3px solid #f0ebe0;
    border-top-color: #c59500;
    border-radius: 50%;
    animation: loader-spin 0.85s linear infinite;
}
@keyframes loader-spin {
    to { transform: rotate(360deg); }
}

/* ── モバイル動画：再生ボタン・コントロール完全非表示 ── */
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-overlay-enclosure {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── ブログ ページネーション ── */
.pagination { display: flex; justify-content: center; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border-radius: 9999px;
    background: #F4F7F9;
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.pagination .page-numbers:hover { background: #c59500; color: #fff; }
.pagination .page-numbers.current { background: #c59500; color: #fff; }
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    width: auto;
    padding: 0 1.25rem;
    gap: 0.5rem;
    border: 2px solid #e5e7eb;
    background: transparent;
    color: #9ca3af;
}
.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover { background: #c59500; border-color: #c59500; color: #fff; }
.pagination .page-numbers.dots { background: transparent; pointer-events: none; }

/* ── ブログ サムネイル figure 修正 ── */
.blog-thumb figure,
.blog-thumb .wp-post-image,
.blog-thumb figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

/* ── Contact Form 7 スタイリング ── */

/* フォーム全体の余白 */
.wpcf7-form > p,
.wpcf7-form > div {
    margin-bottom: 1.5rem;
}
.wpcf7-form > p:last-of-type {
    margin-bottom: 0;
}

/* ラベル */
.wpcf7-form label {
    display: block;
    font-weight: 900;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: #333333;
    font-family: 'Noto Sans JP', sans-serif;
}

/* テキスト・メール・電話・URL 入力 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"] {
    width: 100% !important;
    padding: 0.875rem 1.25rem !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 1rem !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #333333 !important;
    background: #FDFBF7 !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-sizing: border-box !important;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus {
    border-color: #c59500 !important;
    box-shadow: 0 0 0 3px rgba(197,149,0,0.1) !important;
}

/* プレースホルダー */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* セレクトボックス */
.wpcf7-form select {
    width: 100% !important;
    padding: 0.875rem 2.5rem 0.875rem 1.25rem !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 1rem !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #333333 !important;
    background-color: #FDFBF7 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23c59500'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.1rem !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s !important;
}
.wpcf7-form select:focus {
    border-color: #c59500 !important;
    box-shadow: 0 0 0 3px rgba(197,149,0,0.1) !important;
}

/* テキストエリア */
.wpcf7-form textarea {
    width: 100% !important;
    padding: 0.875rem 1.25rem !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 1rem !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #333333 !important;
    background: #FDFBF7 !important;
    outline: none !important;
    resize: vertical !important;
    min-height: 160px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-sizing: border-box !important;
}
.wpcf7-form textarea:focus {
    border-color: #c59500 !important;
    box-shadow: 0 0 0 3px rgba(197,149,0,0.1) !important;
}

/* span ラッパーを幅100%に */
.wpcf7-form .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

/* 送信ボタン */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
    width: 100% !important;
    background: #c59500 !important;
    color: #fff !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.125rem !important;
    letter-spacing: 0.1em !important;
    padding: 1.25rem 2rem !important;
    border: none !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    transition: opacity 0.2s !important;
    box-shadow: 0 8px 25px rgba(197,149,0,0.3) !important;
    display: block !important;
    box-sizing: border-box !important;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover {
    opacity: 0.8 !important;
}

/* バリデーションエラー */
.wpcf7-not-valid-tip {
    color: #ef4444 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    margin-top: 0.25rem !important;
    display: block !important;
}
.wpcf7-not-valid {
    border-color: #ef4444 !important;
}

/* 送信結果メッセージ */
.wpcf7-response-output {
    border-radius: 1rem !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    margin-top: 1rem !important;
    border-width: 1px !important;
    border-style: solid !important;
}
.wpcf7-mail-sent-ok {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}
.wpcf7-mail-sent-ng,
.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}