/*
Theme Name: Tanaboi
Description: A modern WordPress theme built with Tailwind CSS
Version: 1.0.0
Author: Raito Tanaka
Text Domain: tanaboi
*/

/* This file is required by WordPress but styles are handled by Tailwind CSS */

/* カスタムカーソル */
.custom-cursor {
    position: fixed;
    width: 1.5vw;
    height: 1.5vw;
    border: 0.25vw solid #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: exclusion;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    opacity: 0;
}

.custom-cursor.show {
    opacity: 1;
}

/* Contact Form 7 カスタムスタイル */
.wpcf7-form {
    width: 100%;
}

/* セレクトボックス用のカスタムクラス */
.select-box {
    width: 100% !important;
    padding: 0.5rem 0.5rem !important;
    border: none !important;
    font-size: 4vw !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif !important;
    font-weight: bold !important;
}

@media (min-width: 640px) {
    .select-box {
        font-size: 1vw !important;
    }
}

.select-box:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 名前入力フィールド用のカスタムクラス */
.name-box {
    width: 100% !important;
    padding: 0.5rem 0.5rem !important;
    border: none !important;
    font-size: 4vw !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif !important;
    font-weight: bold !important;
}

.name-box::placeholder {
    font-size: 4vw !important;
    font-family: 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif !important;
    font-weight: normal !important;
    color: #ccc !important;
}

@media (min-width: 640px) {
    .name-box::placeholder {
        font-size: 1vw !important;
    }
}

@media (min-width: 640px) {
    .name-box {
        font-size: 1vw !important;
    }
}

.name-box:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 会社名入力フィールド用のカスタムクラス */
.companyName-box {
    width: 100% !important;
    padding: 0.5rem 0.5rem !important;
    border: none !important;
    font-size: 4vw !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif !important;
    font-weight: bold !important;
}

@media (min-width: 640px) {
    .companyName-box {
        font-size: 1vw !important;
    }
}

.companyName-box:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* メール入力フィールド用のカスタムクラス */
.email-box {
    width: 100% !important;
    padding: 0.5rem 0.5rem !important;
    border: none !important;
    font-size: 4vw !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif !important;
    font-weight: bold !important;
}

@media (min-width: 640px) {
    .email-box {
        font-size: 1vw !important;
    }
}

.email-box:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* テキストエリア用のカスタムクラス */
.textarea-box {
    width: 100% !important;
    padding: 0.5rem 0.5rem !important;
    border: none !important;
    font-size: 4vw !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif !important;
    font-weight: bold !important;
    resize: vertical !important;
}

@media (min-width: 640px) {
    .textarea-box {
        font-size: 1vw !important;
    }
}

.textarea-box:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 送信ボタン用のカスタムクラス */
.submit-flex p {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4vw !important;
    width: fit-content !important;
    cursor: pointer !important;
    transition: 300ms !important;
}

.submit-flex p:hover {
    opacity: 0.5 !important;
}

.submit-flex p img {
    transition: 300ms !important;
}

.submit-flex p:hover img {
    transform: translateX(1vw) !important;
}

.submit-flex p br {
    display: none !important;
}

.submit-button {
    font-size: 4vw !important;
    background: transparent !important;
    border: none !important;
    font-family: 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif !important;
    font-weight: bold !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    
}

@media (min-width: 640px) {
    .submit-flex p {
        gap: 2vw !important;
    }
    .submit-button {
        font-size: 1vw !important;
    }
}

.submit-button:hover {
    background: transparent !important;
    border: none !important;
}

.submit-button:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.wpcf7-form-control {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.wpcf7-form-control:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.wpcf7-submit {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 5vw !important;
    font-size: 4vw !important;
    font-family: 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

@media (min-width: 640px) {
    .wpcf7-submit {
        font-size: 1vw !important;
    }
}

.wpcf7-submit::after {
    content: '';
    display: inline-block;
    width: 3vw;
    height: 3vw;
    background-image: url('<?php echo get_template_directory_uri(); ?>/img/arrow-right-black.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 1vw;
}

@media (min-width: 640px) {
    .wpcf7-submit::after {
        width: 0.75vw;
        height: 0.75vw;
    }
}

/* Contact Form 7 のデフォルトスタイルをリセット */
.wpcf7-response-output {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.wpcf7-not-valid-tip {
    font-size: 3vw !important;
    color: #ef4444 !important;
    margin-top: 0.5em !important;
}

@media (min-width: 640px) {
    .wpcf7-not-valid-tip {
        font-size: 0.8vw !important;
    }
}

.wpcf7-validation-errors {
    border: none !important;
    background: transparent !important;
    color: #ef4444 !important;
    font-size: 3vw !important;
    margin: 1em 0 !important;
}

@media (min-width: 640px) {
    .wpcf7-validation-errors {
        font-size: 0.8vw !important;
    }
}

.wpcf7-mail-sent-ok {
    border: none !important;
    background: transparent !important;
    color: #10b981 !important;
    font-size: 3vw !important;
    margin: 1em 0 !important;
}

@media (min-width: 640px) {
    .wpcf7-mail-sent-ok {
        font-size: 0.8vw !important;
    }
}