@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Outfit:wght@100..900&family=Petit+Formal+Script&display=swap');

:root {
--primary-color: #0ABAB5;
--primary-light: #E6F5F4;
--text-color: #333333;
--text-light: #666666;
--bg-light: #FEFBF3;
--white: #FFFFFF;

--container-width: 1200px;
--header-height-dt: 90px;
--header-height-sp: 60px;

--font-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--font-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
--font-md: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--font-lg: clamp(1.25rem, 1rem + 1.25vw, 1.5rem);
--font-xl: clamp(1.5rem, 1.2rem + 2vw, 2.5rem);
--font-hero: clamp(1.75rem, 1.2rem + 3vw, 3rem);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Noto Sans JP', sans-serif;
color: var(--text-color);
line-height: 1.6;
background-color: var(--white);
overflow-x: hidden;
}

a {
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}

a:hover {
color: var(--primary-color);
}

ul {
list-style: none;
}

img {
max-width: 100%;
height: auto;
display: block;
}

.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 5%;
}

/* =========================================
UTILITIES
========================================= */

.text-center {
text-align: center;
}

.hide-sp {
display: block;
}

.hide-pc {
display: none;
}

.section-title {
font-size: var(--font-xl);
font-weight: 400;
margin-bottom: 30px;
line-height: 1.4;
color: #3E3E3E;
}

.section-desc {
font-size: var(--font-md);
color: var(--text-light);
line-height: 2;
margin-bottom: 40px;
}

.btn-outline {
display: inline-block;
padding: 12px 80px;
border: 1px solid var(--text-color);
border-radius: 30px;
font-size: var(--font-md);
font-weight: 500;
color: var(--text-color);
background: transparent;
text-align: center;
transition: all 0.3s ease;
}

.btn-outline:hover {
background: var(--primary-color);
color: var(--white);
border-color: var(--primary-color);
}

.btn-outline:disabled,
.btn-outline.disabled {
background: #e0e0e0;
color: #999;
border-color: #e0e0e0;
cursor: not-allowed;
}

@media (max-width: 991px) {
.hide-sp {
display: none;
}
.hide-pc {
display: block;
}
}

@media (max-width: 768px) {
.container {
padding: 0 20px;
}
.section-title {
margin-bottom: 20px;
}
.section-desc {
margin-bottom: 30px;
}
}

@media (max-width: 480px) {
.container {
padding: 0 20px;
}
}

/* スクロール時のフェイドイン（Vercel実装 global.css 準拠）。
   .reveal-on-scroll を初期非表示にし、JS(main.js initScrollReveal)が .is-revealed を付与して出現させる。 */
.reveal-on-scroll {
opacity: 0;
filter: blur(10px);
transform: translateY(40px);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
            transform 1s cubic-bezier(0.16, 1, 0.3, 1),
            filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-revealed {
opacity: 1;
filter: blur(0px);
transform: translateY(0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }