/* style.css */

:where([class^="ri-"])::before {
    content: "\f3c2";
}

body {
    font-family: 'Noto Sans JP', sans-serif;
}

/* ===== 新しいアニメーション定義 (ここから) ===== */

/* 1. ふわっと表示させるための唯一のキーフレーム */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 2. JavaScriptが監視する要素の初期状態を定義 */
.js-scroll-trigger {
    opacity: 0;
    /* 最初は透明 */
}

/* 3. 画面内に入った時に付与されるクラス。ここでアニメーションを実行 */
.js-scroll-trigger.is-visible {
    /* 下の値を変更すると、アニメーション速度をサイト全体で一括変更できます */
    animation: fadeIn 1.5s ease-out forwards;
}

/* 4. 遅延指定クラス (Tailwind CSSの定義を補強・安定化) */
.animate-delay-100 {
    animation-delay: 100ms;
}

.animate-delay-200 {
    animation-delay: 200ms;
}

.animate-delay-300 {
    animation-delay: 300ms;
}

.animate-delay-400 {
    animation-delay: 400ms;
}

.animate-delay-500 {
    animation-delay: 500ms;
}

.animate-delay-600 {
    animation-delay: 600ms;
}

.animate-delay-700 {
    animation-delay: 700ms;
}

/* ===== 新しいアニメーション定義 (ここまで) ===== */


/* サービスカードのホバーエフェクト（アニメーションとは分離） */
.service-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}


/* その他、ページ固有のスタイル */

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

.custom-checkbox {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid #d4a9c8;
    border-radius: 4px;
}

.custom-checkbox input:checked~.checkmark {
    background-color: #d4a9c8;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* アコーディオンのスタイル */
.accordion-content {
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

.accordion-item.active .accordion-content {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}

/* ヒーローセクション全体の背景画像とグラデーション */
.hero-visual-container {
    height: 100%;
}

.hero-bg-image {
    background-image: url('images/hero-mobile.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



/* ===== ふわふわ浮遊する円のエフェクト (イエローバージョン) ===== */

/* 小さい円用の浮遊アニメーション */
@keyframes floatEffectSmall {
    0% {
        transform: translateY(0px) translateX(0px);
    }
    50% {
        transform: translateY(-40px) translateX(25px);
    }
    100% {
        transform: translateY(0px) translateX(0px);
    }
}

/* 大きい円用の浮遊アニメーション */
@keyframes floatEffectLarge {
    0% {
        transform: translateY(0px) translateX(0px) scale(1);
    }
    50% {
        transform: translateY(-80px) translateX(60px) scale(1.1);
    }
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
    }
}

/* 円を配置するコンテナ */
.floating-orb-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/* 円の共通スタイル */
.orb {
    position: absolute;
    /* イエローに変更 */
    background-color: rgba(254, 212, 0, 0.5); /* #fed400 の半透明色 */
    filter: blur(20px);
    border-radius: 50%;
}

/* 個別の円のサイズ、位置、アニメーションを指定 */
.orb-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 5%;
    animation: floatEffectSmall 7s ease-in-out infinite;
}

.orb-2 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 25%;
    animation: floatEffectLarge 8s ease-in-out infinite;
    animation-delay: -3s;
}

.orb-3 {
    width: 120px;
    height: 120px;
    top: 20%;
    right: 8%;
    animation: floatEffectSmall 6s ease-in-out infinite;
    animation-delay: -1s;
}

.orb-4 {
    width: 250px;
    height: 250px;
    bottom: 0%;
    right: 15%;
    animation: floatEffectLarge 10s ease-in-out infinite;
    animation-delay: -5s;
}

/* スマートフォン表示では、円を小さく、控えめにする */
@media (max-width: 768px) {
    .orb {
        filter: blur(15px);
    }
    .orb-1 {
        width: 100px;
        height: 100px;
    }
    .orb-2 {
        width: 180px;
        height: 180px;
        top: 60%;
        left: -10%;
        animation-duration: 10s;
    }
    .orb-3 {
        display: none;
    }
    .orb-4 {
        width: 150px;
        height: 150px;
        bottom: 5%;
        right: -15%;
        animation-duration: 12s;
    }
}
/* ===== ふわふわ浮遊する円のエフェクト (ここまで) ===== */