/**
 * 栄養ケアステーションページスタイル
 * Care Station Page Styles
 * Version: 1.0.1
 */

/* ========================================
   ページバナー
   ======================================== */

.care-station-page .page-banner {
    position: relative;
    text-align: center;
    padding: 200px 0 var(--spacing-xl);
    margin-bottom: -15px;
    background-color: #319dd9;
}

.care-station-page .page-banner::before {
    content: '';
    position: absolute;
    top: auto;
    bottom: 0;
    transform: translateY(0);
    left: 14%;
    width: 350px;
    height: 182px;
    background-image: url('../images/trees-left.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

.care-station-page .page-banner::after {
    content: '';
    position: absolute;
    top: auto;
    bottom: 0;
    transform: translateY(0);
    right: 14%;
    width: 350px;
    height: 182px;
    background-image: url('../images/trees-right.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

.care-station-page .banner-bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('../images/bg_title.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    min-width: 550px;
    min-height: 170px;
    z-index: 2;
}

.care-station-page .banner-title {
    color: var(--color-white);
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-xs);
    line-height: 1.1;
}

.care-station-page .banner-subtitle {
    color: var(--color-white);
    font-size: var(--font-size-sm);
    margin: 0;
    opacity: 0.95;
    letter-spacing: 0.05em;
}

/* ========================================
   パンくずナビゲーション
   ======================================== */

.care-station-page .breadcrumb-wrapper {
    background-color: var(--color-white);
    padding: var(--spacing-md) 0;
    width: 100%;
    border-bottom: none;
}

.care-station-page .breadcrumb-wrapper .container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ========================================
   コンテンツエリア
   ======================================== */

.care-station-content {
    padding: var(--spacing-ml) 0 0;
}

/* ========================================
   栄養ケアステーションとは？セクション
   ======================================== */

.care-intro-section {
    position: relative;
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-white);
}

/* 見出し */
.care-intro-title {
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: #319dd9;
    margin: 0 0 var(--spacing-2xl);
    line-height: 1.4;
}

/* care_main.png */
.care-main-image {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.care-main-image img {
    max-width: 900px;
    width: 100%;
    height: auto;
    display: inline-block;
}

/* テキスト部分 */
.care-intro-text {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    color: var(--color-text-primary);
}

.care-intro-text p {
    font-size: var(--font-size-base);
    line-height: 1.8;
    margin: 0 0 var(--spacing-xs);
}

/* ========================================
   お食事診断セクション
   ======================================== */

.meal-analysis-section {
    margin: 0 auto var(--spacing-4xl);
    position: relative;
    padding: var(--spacing-3xl) 0 0;
    max-width: 900px;
}

/* 木の装飾 */
.trees-decoration {
    position: absolute;
    top: 40px;
    width: 120px;
    height: auto;
}

.trees-decoration img {
    width: 100%;
    height: auto;
    display: block;
}

.trees-left {
    left: 0;
}

.trees-right {
    right: 0;
}

/* セクションタイトル */
.section-title {
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg);
}

/* サブタイトル */
.section-subtitle {
    font-size: var(--font-size-lg);
    color: #319dd9;
    font-weight: var(--font-weight-semibold);
    margin: 0;
    text-align: center;
}

.subtitle-with-text {
    width: 100%;
    margin-bottom: var(--spacing-2xl);
}

.subtitle-with-text .section-subtitle {
    margin: 0;
}

/* お食事診断コンテンツ */
.meal-analysis-content {
    margin-bottom: var(--spacing-2xl);
    color: var(--color-text-primary);
}

.meal-analysis-content p {
    font-size: var(--font-size-base);
    line-height: 1.8;
    margin: 0 0 var(--spacing-md);
}

.meal-analysis-content p:last-child {
    margin-bottom: 0;
}

/* お食事診断画像 */
.meal-analysis-image {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
}

.meal-analysis-image img {
    max-width: 900px;
    width: 100%;
    height: auto;
    display: inline-block;
}

/* ========================================
   サービスの流れセクション
   ======================================== */

.service-flow-section-inner {
    padding: 0 var(--spacing-3xl);
    background-color: var(--color-white);
    margin-bottom: var(--spacing-4xl);
}

.service-flow-section-inner .flow-title {
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: #319dd9;
    margin: 0 0 var(--spacing-3xl);
    line-height: 1.4;
}

.service-flow-section-inner .flow-steps {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* 縦の緑線 */
.service-flow-section-inner .flow-steps::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 70px;
    bottom: 200px;
    width: 4px;
    background-color: #a8c97f;
    z-index: 0;
}

.service-flow-section-inner .flow-step {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
    position: relative;
}

.service-flow-section-inner .flow-step:last-child {
    margin-bottom: 0;
}

.service-flow-section-inner .step-number-box {
    flex: 0 0 auto;
    width: 100px;
    height: 70px;
    background-color: #319dd9;
    color: var(--color-white);
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

.service-flow-section-inner .step-content-wrapper {
    flex: 1;
    padding-top: var(--spacing-xs);
}

.service-flow-section-inner .step-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: #319dd9;
    margin: 0 0 var(--spacing-lg);
}

.service-flow-section-inner .step-content-flex {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
}

.service-flow-section-inner .step-image {
    flex: 0 0 auto;
    width: 280px;
}

.service-flow-section-inner .step-image img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #e0e0e0;
}

.service-flow-section-inner .step-text {
    flex: 1;
}

.service-flow-section-inner .step-text p {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0;
}

/* ========================================
   サービスの流れセクション（全幅）
   ======================================== */

.service-flow-section {
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-white);
}

.flow-title {
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: #319dd9;
    margin: 0 0 var(--spacing-3xl);
    line-height: 1.4;
}

.flow-steps {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* 縦の緑線 */
.flow-steps::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 70px;
    bottom: 200px;
    width: 4px;
    background-color: #a8c97f;
    z-index: 0;
}

.flow-step {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
    position: relative;
}

.flow-step:last-child {
    margin-bottom: 0;
}

.step-number-box {
    flex: 0 0 auto;
    width: 100px;
    height: 70px;
    background-color: #319dd9;
    color: var(--color-white);
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

.step-content-wrapper {
    flex: 1;
    padding-top: var(--spacing-xs);
}

.step-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: #319dd9;
    margin: 0 0 var(--spacing-lg);
}

.step-content-flex {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
}

.step-image {
    flex: 0 0 auto;
    width: 280px;
}

.step-image img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #e0e0e0;
}

.step-text {
    flex: 1;
}

.step-text p {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0;
}

/* ========================================
   食育サポートセクション
   ======================================== */

.food-education-section {
    margin: 0 auto;
    position: relative;
    padding: var(--spacing-3xl) 0;
    max-width: 900px;
}

.food-education-section .subtitle-with-text {
    width: 100%;
    margin-bottom: var(--spacing-2xl);
}

.food-education-section .section-subtitle {
    margin: 0;
    background-color: #319dd9;
    color: var(--color-white);
    padding: var(--spacing-xs) var(--spacing-md);
    text-align: center;
}

.food-education-content {
    display: flex;
    gap: var(--spacing-2xl);
    align-items: flex-start;
}

.food-education-image {
    flex: 0 0 auto;
    width: 340px;
}

.food-education-image img {
    width: 100%;
    height: auto;
    display: block;
}

.food-education-text {
    flex: 1;
}

.food-education-text p {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md);
}

.food-education-text p:last-child {
    margin-bottom: 0;
}

/* ========================================
   TECHアスリート支援セクション
   ======================================== */

.athlete-support-section {
    margin: 0 auto;
    position: relative;
    padding: var(--spacing-3xl) 0;
    max-width: 900px;
}

.athlete-support-section .subtitle-with-text {
    width: 100%;
    margin-bottom: var(--spacing-2xl);
}

.athlete-support-section .section-subtitle {
    margin: 0;
    background-color: #319dd9;
    color: var(--color-white);
    padding: var(--spacing-xs) var(--spacing-md);
    text-align: center;
}

.athlete-support-content {
    display: flex;
    gap: var(--spacing-2xl);
    align-items: flex-start;
}

.athlete-support-image {
    flex: 0 0 auto;
    width: 340px;
}

.athlete-support-image img {
    width: 100%;
    height: auto;
    display: block;
}

.athlete-support-text {
    flex: 1;
}

.athlete-support-text p {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md);
}

.athlete-support-text p:last-child {
    margin-bottom: 0;
}

/* ========================================
   サービスの流れセクション（アスリート支援）
   ======================================== */

.athlete-flow-section-inner {
    background-color: var(--color-white);
}

.athlete-flow-section-inner .flow-title {
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: #319dd9;
    margin: 0 0 var(--spacing-3xl);
    line-height: 1.4;
}

.athlete-flow-section-inner .flow-steps {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* 縦の緑線 */
.athlete-flow-section-inner .flow-steps::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 70px;
    bottom: 200px;
    width: 4px;
    background-color: #a8c97f;
    z-index: 0;
}

.athlete-flow-section-inner .flow-step {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
    position: relative;
}

.athlete-flow-section-inner .flow-step:last-child {
    margin-bottom: 0;
}

.athlete-flow-section-inner .step-number-box {
    flex: 0 0 auto;
    width: 100px;
    height: 70px;
    background-color: #319dd9;
    color: var(--color-white);
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

.athlete-flow-section-inner .step-content-wrapper {
    flex: 1;
    padding-top: var(--spacing-xs);
}

.athlete-flow-section-inner .step-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: #319dd9;
    margin: 0 0 var(--spacing-lg);
}

.athlete-flow-section-inner .step-content-flex {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
}

.athlete-flow-section-inner .step-image {
    flex: 0 0 auto;
    width: 280px;
}

.athlete-flow-section-inner .step-image img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #e0e0e0;
}

.athlete-flow-section-inner .step-text {
    flex: 1;
}

.athlete-flow-section-inner .step-text p {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0;
}

.athlete-notes {
    max-width: 900px;
    margin: 0 auto var(--spacing-3xl);
    padding-top: var(--spacing-2xl);
}

.athlete-notes p {
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs);
}

.athlete-notes p:last-child {
    margin-bottom: 0;
}

/* ========================================
   サービスの流れセクション（食育セミナー）
   ======================================== */

.seminar-flow-section-inner {
    background-color: var(--color-white);
}

.seminar-flow-section-inner .flow-title {
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: #319dd9;
    margin: 0 0 var(--spacing-3xl);
    line-height: 1.4;
}

.seminar-flow-section-inner .flow-steps {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* 縦の緑線 */
.seminar-flow-section-inner .flow-steps::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 70px;
    bottom: 200px;
    width: 4px;
    background-color: #a8c97f;
    z-index: 0;
}

.seminar-flow-section-inner .flow-step {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
    position: relative;
}

.seminar-flow-section-inner .flow-step:last-child {
    margin-bottom: 0;
}

.seminar-flow-section-inner .step-number-box {
    flex: 0 0 auto;
    width: 100px;
    height: 70px;
    background-color: #319dd9;
    color: var(--color-white);
    font-size: 40px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

.seminar-flow-section-inner .step-content-wrapper {
    flex: 1;
    padding-top: var(--spacing-xs);
}

.seminar-flow-section-inner .step-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: #319dd9;
    margin: 0 0 var(--spacing-lg);
}

.seminar-flow-section-inner .step-content-flex {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
}

.seminar-flow-section-inner .step-image {
    flex: 0 0 auto;
    width: 280px;
}

.seminar-flow-section-inner .step-image img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #e0e0e0;
}

.seminar-flow-section-inner .step-text {
    flex: 1;
}

.seminar-flow-section-inner .step-text p {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0;
}

.seminar-notes {
    max-width: 900px;
    margin: 0 auto var(--spacing-3xl);
    padding-top: var(--spacing-2xl);
}

.seminar-notes p {
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs);
}

.seminar-notes p:last-child {
    margin-bottom: 0;
}

/* ========================================
   食育サポート規約ボタン
   ======================================== */

.toc-button-wrapper {
    text-align: center;
    padding: var(--spacing-4xl) 0;
    background-color: var(--color-white);
}

.btn-toc {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-2xl);
    background-color: #319dd9;
    color: var(--color-white);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border-radius: 50px;
    transition: var(--transition-base);
}

.btn-toc::after {
    content: '›';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    padding-bottom: 3px;
}

.btn-toc:hover {
    background-color: var(--color-white);
    color: #319dd9;
    transform: translateY(-2px);
}

/* ========================================
   CONTACTセクション
   ======================================== */

.contact-section {
    background-color: #90b62b;
}

.contact-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}

.contact-content {
    background-color: var(--color-white);
    padding: var(--spacing-2xl) var(--spacing-2xl);
    text-align: center;
}

.contact-title {
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs);
}

.contact-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-2xl);
}

.contact-text {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-2xl);
}

.office-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xl);
}

.map-image {
    margin: 0 0 var(--spacing-xl);
}

.map-image img {
    max-width: 400px;
    width: 100%;
    height: auto;
    display: inline-block;
}

.office-address,
.office-company {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs);
    line-height: 1.6;
}

.office-company {
    margin-bottom: var(--spacing-2xl);
}

/* お問い合わせ情報 */
.contact-info {
    margin-bottom: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.phone-icon,
.mail-icon {
    margin: 0 0 var(--spacing-md);
}

.phone-icon svg,
.mail-icon svg {
    width: 45px;
    height: 45px;
    display: block;
}

.contact-label {
    font-size: var(--font-size-base);
    color: #319dd9;
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-md);
}

.contact-detail {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm);
}

.contact-detail .label {
    font-weight: var(--font-weight-semibold);
    margin-right: var(--spacing-sm);
}

.contact-detail .number {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.contact-hours,
.contact-closed {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin: var(--spacing-md) 0 0;
    line-height: 1.6;
}

.contact-closed {
    margin-top: var(--spacing-xs);
}

.contact-description {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg);
    line-height: 1.6;
}

.btn-contact-form {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-2xl);
    background-color: #319dd9;
    color: var(--color-white);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border-radius: 50px;
    transition: var(--transition-base);
}

.btn-contact-form::after {
    content: '›';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    padding-bottom: 3px;
}

.btn-contact-form:hover {
    background-color: var(--color-white);
    color: #319dd9;
    transform: translateY(-2px);
}

/* ========================================
   レスポンシブデザイン
   ======================================== */

/* タブレット */
@media (max-width: 1023px) {
    .care-station-page .page-banner::before,
    .care-station-page .page-banner::after {
        display: none;
    }
    
    .care-intro-section {
        padding: var(--spacing-2xl) var(--spacing-md);
    }
    
    .care-intro-title {
        font-size: var(--font-size-xl);
    }
    
    .care-main-image img {
        max-width: 700px;
    }
    
    .meal-analysis-section {
        padding: var(--spacing-2xl) var(--spacing-md);
    }
    
    .trees-decoration {
        display: none;
    }
    
    .section-title {
        font-size: var(--font-size-xl);
    }
    
    .meal-analysis-image img {
        max-width: 700px;
    }
    
    .service-flow-section {
        padding: var(--spacing-2xl) 0;
    }
    
    .flow-title {
        font-size: var(--font-size-xl);
    }
    
    .service-flow-section-inner .flow-steps::before,
    .flow-steps::before {
        left: 45px;
        top: 30px;
        bottom: 30px;
        width: 3px;
    }
    
    .flow-step {
        flex-direction: column;
        gap: var(--spacing-md);
        position: relative;
        padding-left: 0;
        align-items: flex-start;
    }
    
    .step-number-box {
        width: 90px;
        height: 60px;
        font-size: 36px;
        position: relative;
        z-index: 1;
        margin-left: 0;
    }
    
    .step-content-flex {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .step-image {
        width: 100%;
        max-width: 400px;
    }
    
    .food-education-section {
        padding: var(--spacing-2xl) 0;
    }
    
    .food-education-section .trees-decoration {
        display: none;
    }
    
    .food-education-section .section-subtitle {
        padding: var(--spacing-xs);
    }
    
    .food-education-content {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .food-education-image {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .athlete-support-section {
        padding: var(--spacing-2xl) 0;
    }
    
    .athlete-support-section .trees-decoration {
        display: none;
    }
    
    .athlete-support-section .section-subtitle {
        padding: var(--spacing-xs);
    }
    
    .athlete-support-content {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .athlete-support-image {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .athlete-flow-section-inner {
        padding: var(--spacing-2xl) 0;
    }
    
    .athlete-flow-section-inner .flow-title {
        font-size: var(--font-size-xl);
    }
    
    .athlete-flow-section-inner .flow-steps::before {
        display: none;
    }
    
    .athlete-flow-section-inner .flow-step {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .athlete-flow-section-inner .step-number-box {
        width: 90px;
        height: 60px;
        font-size: 36px;
    }
    
    .athlete-flow-section-inner .step-content-flex {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .athlete-flow-section-inner .step-image {
        width: 100%;
        max-width: 400px;
    }
    
    .toc-button-wrapper {
        padding: var(--spacing-2xl) var(--spacing-md);
    }
}

/* モバイル */
@media (max-width: 767px) {
    .care-station-page .page-banner {
        padding: 15px 0;
        overflow: hidden;
    }
    
    .care-station-page .page-banner::before,
    .care-station-page .page-banner::after {
        display: none;
    }
    
    .care-station-page .banner-bg {
        min-width: auto;
    }
    
    .care-station-page .banner-title {
        font-size: 24px;
        white-space: nowrap;
    }
    
    .care-station-page .banner-subtitle {
        font-size: var(--font-size-xs);
    }
    
    .care-station-content {
        padding: 0 0 var(--spacing-lg);
    }
    
    .care-intro-section {
        padding: 8http://localhost:8000/sitemap/px var(--spacing-sm);
    }
    
    .care-intro-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-lg);
    }
    
    .care-main-image {
        margin-bottom: var(--spacing-lg);
    }
    
    .care-main-image img {
        max-width: 100%;
    }
    
    .care-intro-text {
        margin-bottom: var(--spacing-xl);
    }
    
    .care-intro-text p {
        font-size: var(--font-size-sm);
    }
    
    .meal-analysis-section {
        padding: var(--spacing-lg) var(--spacing-sm);
        margin-bottom: var(--spacing-xl);
        position: relative;
    }
    
    .trees-decoration {
        display: none;
    }
    
    .meal-analysis-section::before {
        content: '';
        display: block;
        width: 200px;
        height: 100px;
        margin: 0 auto var(--spacing-md);
        background-image: url('../images/trees-left.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    
    .section-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-md);
    }
    
    .section-subtitle {
        font-size: var(--font-size-base);
    }
    
    .meal-analysis-content p {
        font-size: var(--font-size-sm);
    }
    
    .meal-analysis-image {
        margin-bottom: var(--spacing-lg);
    }
    
    .meal-analysis-image img {
        max-width: 100%;
    }
    
    .service-flow-section {
        padding: var(--spacing-xl) 0;
    }
    
    .flow-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-xl);
    }
    
    .service-flow-section-inner .flow-steps::before,
    .flow-steps::before {
        display: block;
        left: 45px;
        top: 60px;
        bottom: 0;
        width: 4px;
        background-color: #a8c97f;
    }
    
    .service-flow-section-inner .flow-step:last-child::after,
    .flow-step:last-child::after {
        content: '';
        position: absolute;
        left: 43px;
        top: 60px;
        bottom: 0;
        width: 8px;
        background-color: var(--color-white);
        z-index: 1;
    }
    
    .service-flow-section-inner .flow-step,
    .flow-step {
        flex-direction: column;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-2xl);
        align-items: flex-start;
        padding-left: 0;
        position: relative;
    }
    
    .service-flow-section-inner .step-number-box,
    .step-number-box {
        width: 90px;
        height: 60px;
        font-size: 36px;
        z-index: 1;
        border-radius: 8px;
    }
    
    .service-flow-section-inner .step-content-wrapper,
    .step-content-wrapper {
        width: 100%;
    }
    
    .service-flow-section-inner .step-title,
    .step-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-md);
        margin-top: calc(var(--spacing-sm) * -1 - 60px);
        margin-left: 110px;
    }
    
    .service-flow-section-inner .step-content-flex,
    .step-content-flex {
        flex-direction: column;
        gap: var(--spacing-md);
        margin-left: 110px;
    }
    
    .service-flow-section-inner .step-image,
    .step-image {
        width: 100%;
        max-width: 100%;
    }
    
    .service-flow-section-inner .step-text p,
    .step-text p {
        font-size: var(--font-size-sm);
    }
    
    .food-education-section {
        padding: var(--spacing-xl) 0;
    }
    
    .food-education-subtitle {
        font-size: var(--font-size-base);
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
    }
    
    .food-education-content {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .food-education-image {
        width: 100%;
        max-width: 100%;
    }
    
    .food-education-text p {
        font-size: var(--font-size-sm);
    }
    
    .athlete-support-section {
        padding: var(--spacing-xl) 0;
    }
    
    .athlete-support-section .section-subtitle {
        font-size: var(--font-size-base);
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
    }
    
    .athlete-support-content {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .athlete-support-image {
        width: 100%;
        max-width: 100%;
    }
    
    .athlete-support-text p {
        font-size: var(--font-size-sm);
    }
    
    .athlete-flow-section-inner {
        padding: var(--spacing-xl) 0;
    }
    
    .athlete-flow-section-inner .flow-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-xl);
    }
    
    .athlete-flow-section-inner .flow-steps::before {
        display: block;
        left: 45px;
        top: 60px;
        bottom: 0;
        width: 4px;
        background-color: #a8c97f;
    }
    
    .athlete-flow-section-inner .flow-step:last-child::after {
        content: '';
        position: absolute;
        left: 43px;
        top: 60px;
        bottom: 0;
        width: 8px;
        background-color: var(--color-white);
        z-index: 1;
    }
    
    .athlete-flow-section-inner .flow-step {
        flex-direction: column;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-2xl);
        position: relative;
    }
    
    .athlete-flow-section-inner .step-number-box {
        width: 90px;
        height: 60px;
        font-size: 36px;
        border-radius: 8px;
    }
    
    .athlete-flow-section-inner .step-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-md);
        margin-top: calc(var(--spacing-sm) * -1 - 60px);
        margin-left: 110px;
    }
    
    .athlete-flow-section-inner .step-content-flex {
        flex-direction: column;
        gap: var(--spacing-md);
        margin-left: 110px;
    }
    
    .athlete-flow-section-inner .step-image {
        width: 100%;
        max-width: 100%;
    }
    
    .athlete-flow-section-inner .step-text p {
        font-size: var(--font-size-sm);
    }
    
    .athlete-notes p {
        font-size: var(--font-size-xs);
    }
    
    .toc-button-wrapper {
        padding: var(--spacing-xl) var(--spacing-sm);
    }
    
    .contact-section {
        padding: 0;
    }
    
    .contact-content {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .contact-title {
        font-size: 28px;
    }
    
    .contact-text {
        font-size: var(--font-size-sm);
    }
    
    
    .seminar-flow-section-inner {
        padding: var(--spacing-2xl) 0;
    }
    
    .seminar-flow-section-inner .flow-title {
        font-size: var(--font-size-xl);
    }
    
    .seminar-flow-section-inner .flow-steps::before {
        display: block;
        left: 45px;
        top: 60px;
        bottom: 0;
        width: 4px;
        background-color: #a8c97f;
    }
    
    .seminar-flow-section-inner .flow-step:last-child::after {
        content: '';
        position: absolute;
        left: 43px;
        top: 60px;
        bottom: 0;
        width: 8px;
        background-color: var(--color-white);
        z-index: 1;
    }
    
    .seminar-flow-section-inner .flow-step {
        flex-direction: column;
        gap: var(--spacing-md);
        position: relative;
    }
    
    .seminar-flow-section-inner .step-number-box {
        width: 90px;
        height: 60px;
        font-size: 36px;
        border-radius: 8px;
    }
    
    .seminar-flow-section-inner .step-title {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-md);
        margin-top: calc(var(--spacing-sm) * -1 - 60px);
        margin-left: 110px;
    }
    
    .seminar-flow-section-inner .step-content-flex {
        flex-direction: column;
        gap: var(--spacing-md);
        margin-left: 110px;
    }
    
    .seminar-flow-section-inner .step-image {
        width: 100%;
        max-width: 400px;
    }
    
    .service-flow-section-inner {
        padding: var(--spacing-2xl) 0;
    }
    
    .service-flow-section-inner .flow-title {
        font-size: var(--font-size-xl);
    }
    
    .service-flow-section-inner .flow-step {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .service-flow-section-inner .step-number-box {
        width: 90px;
        height: 60px;
        font-size: 36px;
    }
    
    .service-flow-section-inner .step-content-flex {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .service-flow-section-inner .step-image {
        width: 100%;
        max-width: 400px;
    }
}