/* ==========================================================================
   Utilities & Components
   ========================================================================== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.container--narrow {
    max-width: 950px;
}

.section {
    padding: 80px 10px;
}

.section--gray {
    background-color: var(--color-bg-light);
}

.section--dark {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.section--white {
    background-color: rgba(255, 255, 255, 0.8); 
    backdrop-filter: blur(5px); 
}

.section-title {
    font-size: 2rem;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: var(--spacing-md);
    font-weight: 900;
}
.section-title span {
    background: linear-gradient(transparent 80%, #ffeb3b 70%); 
}

.section-title--left {
    text-align: left;
}

.section-title--white {
    color: var(--color-white);
}

.section-desc {
    text-align: center;
    margin-bottom: var(--spacing-md);
    margin-top: calc(var(--spacing-md) * -1);
}
.section--light {
    background-color: rgba(3, 114, 189, 0.05);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 68px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

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

.btn--cta {
    background-color: var(--color-white);
    color: var(--color-primary);
    font-size: 1.25rem;
    padding: 18px 48px;
    box-shadow: 0 4px 15px rgba(3, 114, 189, 0.6);
    border: none;
}

.btn--cta:hover {
    background-color: var(--color-white); /* 少し濃いブルー */
    box-shadow: 0 6px 20px rgba(3, 114, 189, 0.6);
}

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

.btn--outline-white {
    border: 1px solid var(--color-white);
    color: var(--color-white);
    background: transparent;
}

.btn--text {
    color: var(--color-primary);
    font-weight: 700;
    padding: 0;
}

.btn--full {
    display: block;
    width: 100%;
}

.btn--sm {
    padding: 8px 16px;
    font-size: 0.9rem;
}

.btn--lg {
    padding: 16px 32px;
}

.u-pc-only {
    display: block;
}
.u-sp-only {
    display: none;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 1.5em;
    }
    .u-pc-only {
        display: none;
    }
    .u-sp-only {
        display: block;
    }
}
/*丸囲み文字*/
.circle-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: var(--color-white);
  }
.circle-text.is-blue {
    background: var(--color-blue);
    color: #fff;
}
.circle-text.is-green {
    background: var(--color-green);
    color: #fff;
}
.circle-text.is-orange {
    background: var(--color-orange);
    color: #fff;
}
.circle-text.is-skyblue {
    background: var(--color-skyblue);
    color: var(--color-text);
}

/* ==========================================================================
   Utilities (余白などのプリセット)
   ========================================================================== */
/* マージン（上） */
.u-mt-0  { margin-top: 0 !important; }
.u-mt-10 { margin-top: 10px !important; }
.u-mt-20 { margin-top: 20px !important; }
.u-mt-30 { margin-top: 30px !important; }
.u-mt-40 { margin-top: 40px !important; }
.u-mt-50 { margin-top: 50px !important; }
.u-mt-60 { margin-top: 60px !important; }
.u-mt-70 { margin-top: 70px !important; }
.u-mt-80 { margin-top: 80px !important; }

.u-mt-xs { margin-top: 12px; }
.u-mt-sm { margin-top: 24px; }

/* マージン（右） */
.u-mr-0  { margin-right: 0 !important; }
.u-mr-10 { margin-right: 10px !important; }
.u-mr-20 { margin-right: 20px !important; }
.u-mr-30 { margin-right: 30px !important; }
.u-mr-40 { margin-right: 40px !important; }
.u-mr-50 { margin-right: 50px !important; }
.u-mr-60 { margin-right: 60px !important; }
.u-mr-70 { margin-right: 70px !important; }
.u-mr-80 { margin-right: 80px !important; }

/* マージン（下） */
.u-mb-0  { margin-bottom: 0 !important; }
.u-mb-10 { margin-bottom: 10px !important; }
.u-mb-20 { margin-bottom: 20px !important; }
.u-mb-30 { margin-bottom: 30px !important; }
.u-mb-50 { margin-bottom: 50px !important; }
.u-mb-40 { margin-bottom: 40px !important; }
.u-mb-60 { margin-bottom: 60px !important; }
.u-mb-70 { margin-bottom: 70px !important; }
.u-mb-80 { margin-bottom: 80px !important; }

/* マージン（左） */
.u-ml-0  { margin-left: 0 !important; }
.u-ml-10 { margin-left: 10px !important; }
.u-ml-20 { margin-left: 20px !important; }
.u-ml-30 { margin-left: 30px !important; }
.u-ml-40 { margin-left: 40px !important; }
.u-ml-50 { margin-left: 50px !important; }
.u-ml-60 { margin-left: 60px !important; }
.u-ml-70 { margin-left: 70px !important; }
.u-ml-80 { margin-left: 80px !important; }

/* パディング（上） */
.u-pt-0  { padding-top: 0 !important; }
.u-pt-10 { padding-top: 10px !important; }
.u-pt-20 { padding-top: 20px !important; }
.u-pt-30 { padding-top: 30px !important; }
.u-pt-40 { padding-top: 40px !important; }
.u-pt-50 { padding-top: 50px !important; }
.u-pt-60 { padding-top: 60px !important; }
.u-pt-70 { padding-top: 70px !important; }
.u-pt-80 { padding-top: 80px !important; }

/* パディング（右） */
.u-pr-0  { padding-right: 0 !important; }
.u-pr-10 { padding-right: 10px !important; }
.u-pr-20 { padding-right: 20px !important; }
.u-pr-30 { padding-right: 30px !important; }
.u-pr-40 { padding-right: 40px !important; }
.u-pr-50 { padding-right: 50px !important; }
.u-pr-60 { padding-right: 60px !important; }
.u-pr-70 { padding-right: 70px !important; }
.u-pr-80 { padding-right: 80px !important; }

/* パディング（下） */
.u-pb-0  { padding-bottom: 0 !important; }
.u-pb-10 { padding-bottom: 10px !important; }
.u-pb-20 { padding-bottom: 20px !important; }
.u-pb-30 { padding-bottom: 30px !important; }
.u-pb-40 { padding-bottom: 40px !important; }
.u-pb-50 { padding-bottom: 50px !important; }
.u-pb-60 { padding-bottom: 60px !important; }
.u-pb-70 { padding-bottom: 70px !important; }
.u-pb-80 { padding-bottom: 80px !important; }

/* パディング（左） */
.u-pl-0  { padding-left: 0 !important; }
.u-pl-10 { padding-left: 10px !important; }
.u-pl-20 { padding-left: 20px !important; }
.u-pl-30 { padding-left: 30px !important; }
.u-pl-40 { padding-left: 40px !important; }
.u-pl-50 { padding-left: 50px !important; }
.u-pl-60 { padding-left: 60px !important; }
.u-pl-70 { padding-left: 70px !important; }
.u-pl-80 { padding-left: 80px !important; }

/* テキスト配置 */
.u-text-center { text-align: center !important; }
.u-text-left   { text-align: left !important; }
.u-text-right  { text-align: right !important; }

/*フォントサイズ*/
.u-text-xs   { font-size: var(--text-xs) !important; }
.u-text-sm   { font-size: var(--text-sm) !important; }

/*フォントウエイト*/
.u-fw-100 { font-weight: 100 !important; }
.u-fw-200 { font-weight: 200 !important; }
.u-fw-300 { font-weight: 300 !important; }
.u-fw-400 { font-weight: 400 !important; }
.u-fw-500 { font-weight: 500 !important; }
.u-fw-600 { font-weight: 600 !important; }
.u-fw-700 { font-weight: 700 !important; }
.u-fw-800 { font-weight: 800 !important; }
.u-fw-900 { font-weight: 900 !important; }
.u-fw-bold { font-weight: bold !important; }

/* Flex Gap Utility */
.u-flex-gap {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.u-marker--yellow {
    background: linear-gradient(transparent 60%, #ffeb3b 70%); 
}