.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* data-weight="fill" が付与されているアイコンは塗りつぶし状態にする */
.material-symbols-outlined[data-weight="fill"] {
    font-variation-settings: 'FILL' 1;
}

body {
    background-color: #f8fbf9;
    color: #191c1b;
    scroll-behavior: smooth;
}

/* 全体のスクロールフェードイン（ゆっくりな動き） */
.reveal {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: all 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* アニメーションの時差出現用クラス */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* 制作の流れ（Process）のステップ用アニメーション */
.step-item {
    opacity: 0;
    transform: translateY(10px);
    transition: all 1.5s ease-out;
}
.step-item.active {
    opacity: 1;
    transform: translateY(0);
}

/* 制作の流れ（Process）の矢印用アニメーション */
.arrow-fade {
    opacity: 0;
    transition: opacity 1.5s ease-out;
}
.arrow-fade.active { 
    opacity: 1; 
}

/* FAQアコーディオン用 */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}
.accordion-icon {
    transition: transform 0.3s ease;
}
.accordion-active .accordion-icon {
    transform: rotate(180deg);
}

/* メッシュ背景 */
.bg-mesh {
    background-color: #f8fbf9;
    background-image: radial-gradient(at 100% 0%, #cde8e1 0px, transparent 50%),
                      radial-gradient(at 0% 100%, #c7e7f9 0px, transparent 50%);
}

/* 問題解決セクションのボックスを固定幅に調整 */
.problems-grid {
    max-width: 768px; /* 約80%程度のサイズ感 */
    margin-left: auto;
    margin-right: auto;
}