/* /ski/flow/ : page-scoped styles */
.flow-page{--flow-blue:#187c9c;--flow-ink:#243746;--flow-muted:#647784;--flow-line:#dce8ed;color:var(--flow-ink);font-size:16px;line-height:1.85;background:#fff;padding-bottom:80px}
.flow-page *{box-sizing:border-box}
.flow-page [hidden]{display:none!important}
.flow-container{width:min(1120px,calc(100% - 40px));margin-inline:auto}
.flow-hero{background:linear-gradient(115deg,rgba(8,75,112,.94),rgba(33,149,171,.82)),url('../../img/ski/flow/img_1920x800_001.webp') center/cover;padding:75px 0 80px;color:#fff}
.flow-hero__eyebrow,.flow-section__eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;margin:0 0 10px}
.flow-hero h1{font-size:clamp(27px,4vw,44px);line-height:1.35;margin:0 0 18px;font-weight:800;color:#fff}
.flow-hero p:last-child{font-size:16px;margin:0;max-width:680px}
.flow-breadcrumb{font-size:12px;color:var(--flow-muted);padding:17px 0 35px}
.flow-breadcrumb a{color:var(--flow-blue)}
.flow-plan{text-align:center;padding:16px 0 34px}
.flow-plan h2,.flow-panel__intro h2,.flow-related h2{font-size:clamp(23px,3vw,30px);font-weight:800;line-height:1.45;margin:0 0 12px}
.flow-section__eyebrow{color:var(--flow-blue)}
.flow-plan__intro{margin:0 0 28px;color:var(--flow-muted)}
.flow-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.flow-tab{appearance:none;background:#fff;border:2px solid var(--flow-line);border-radius:14px;padding:23px 12px;cursor:pointer;font:inherit;font-weight:800;font-size:17px;color:var(--flow-ink);display:flex;align-items:center;justify-content:center;gap:12px;transition:.15s}
.flow-tab i{font-size:25px;color:#7793a3}
.flow-tab[aria-selected=true]{background:#e9f8fb;border-color:var(--flow-blue);color:#086b88;box-shadow:0 5px 16px rgba(18,104,139,.12)}
.flow-tab[aria-selected=true] i{color:var(--flow-blue)}
.flow-tab:focus-visible,.flow-related a:focus-visible,.flow-details summary:focus-visible{outline:3px solid #e0a028;outline-offset:3px}
.flow-panel{padding:35px 0 50px}
.flow-panel__intro{text-align:center;margin:0 0 38px}
.flow-timeline{max-width:950px;margin:auto;position:relative}
.flow-timeline:before{content:'';position:absolute;left:31px;top:38px;bottom:60px;width:2px;background:var(--flow-line)}
.flow-step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:24px;position:relative;margin:0 0 26px}
.flow-step__marker{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--flow-blue);color:#fff;border:6px solid #eaf5f8;border-radius:50%;font-size:18px;font-weight:800;z-index:1;line-height:1}
.flow-step__content{min-width:0;border:1px solid var(--flow-line);border-radius:15px;box-shadow:0 6px 26px rgba(27,69,88,.055);overflow:hidden;background:#fff}
.flow-step__heading{display:flex;align-items:center;gap:12px;background:#f3f9fb;padding:17px 24px;border-bottom:1px solid var(--flow-line)}
.flow-step__icon{color:var(--flow-blue);font-size:21px;flex-shrink:0}
.flow-step__heading h3{margin:0;font-size:20px;line-height:1.5;font-weight:800;color:var(--flow-ink)}
.flow-step__body{padding:23px 26px;font-size:15px;overflow-wrap:anywhere}
.flow-step__body p{margin:0 0 13px;line-height:1.9}
.flow-step__body p:last-child{margin-bottom:0}
.flow-step__body h4,.flow-step__body h5{font-size:16px;font-weight:800;margin:19px 0 8px;line-height:1.6;color:var(--flow-ink)}
.flow-step__body a{color:#086f9c;text-decoration:underline;text-underline-offset:3px}
.flow-step__body .bg_yellow{background:#fff8e6;padding:18px;border-radius:10px;border-left:4px solid #e9ad31}
.flow-step__body .bg-fff{background:#fff;padding:12px}
.flow-step__body .fc-red4{color:#b63b3b}.flow-step__body .fc-blu{color:#1475a1}
.flow-step__body .fb{font-weight:700}
.flow-step__body .bo,.flow-step__body .bo-5px{border:0}
.flow-step__body .w49per,.flow-step__body .w100per{width:auto;float:none}
.flow-step__body .fl,.flow-step__body .fr{float:none}
.flow-step__body .p-10,.flow-step__body .p-15,.flow-step__body .p-20{padding:0}
.flow-step__body .m-b10,.flow-step__body .m-b15,.flow-step__body .m-b20{margin-bottom:14px}
.flow-step__lead{color:var(--flow-muted)}
.flow-details{border:1px solid var(--flow-line);border-radius:10px;margin-top:18px;overflow:hidden}
.flow-details summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;background:#f6fafc;cursor:pointer;font-weight:800;list-style:none}
.flow-details summary::-webkit-details-marker{display:none}
.flow-details summary i{transition:transform .2s}.flow-details[open] summary i{transform:rotate(180deg)}
.flow-details__body{padding:16px 18px}
.flow-related{background:#f5f9fb;border-radius:18px;padding:35px;margin-top:16px;text-align:center}
.flow-related__links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.flow-related__links a{display:flex;align-items:center;justify-content:center;gap:10px;padding:17px 12px;background:#fff;border:1px solid var(--flow-line);border-radius:10px;text-decoration:none!important;color:var(--flow-ink);font-weight:700}
.flow-related__links a .fa-arrow-right{font-size:12px;color:var(--flow-blue)}
@media(max-width:767px){.flow-container{width:min(100% - 28px,1120px)}.flow-hero{padding:52px 0 55px}.flow-hero p:last-child{font-size:14px}.flow-breadcrumb{padding-bottom:24px}.flow-plan{padding:10px 0 15px}.flow-tabs{gap:7px}.flow-tab{flex-direction:column;gap:5px;font-size:12px;line-height:1.5;padding:13px 4px;border-radius:10px}.flow-tab i{font-size:22px}.flow-panel{padding:26px 0 35px}.flow-panel__intro{margin-bottom:25px}.flow-step{grid-template-columns:42px minmax(0,1fr);gap:10px;margin-bottom:18px}.flow-timeline:before{left:20px}.flow-step__marker{width:42px;height:42px;border-width:4px;font-size:13px}.flow-step__heading{padding:13px 12px;gap:8px}.flow-step__heading h3{font-size:16px}.flow-step__icon{font-size:16px}.flow-step__body{padding:15px 13px;font-size:14px}.flow-details summary{font-size:13px;padding:12px}.flow-details__body{padding:13px}.flow-related{padding:24px 16px}.flow-related__links{grid-template-columns:1fr}.flow-related__links a{justify-content:space-between}}

/* ========================================
   お支払い案内
======================================== */

.flow-payment {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* 子要素の横幅制御 */
.flow-payment *,
.flow-payment *::before,
.flow-payment *::after {
    box-sizing: border-box;
}

.flow-payment > * {
    max-width: 100%;
}

/* 文字サイズの統一 */
.flow-payment p,
.flow-payment li,
.flow-payment td,
.flow-payment th,
.flow-payment dd,
.flow-payment dt {
    font-size: 14px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* 見出し */
.flow-payment h3,
.flow-payment h4,
.flow-payment h5 {
    font-size: 16px;
    line-height: 1.5;
}

/* 画像のはみ出し防止 */
.flow-payment img {
    max-width: 100%;
    height: auto;
}

/* テーブル */
.flow-payment table {
    max-width: 100%;
    border-collapse: collapse;
}

/* スマートフォン */
@media screen and (max-width: 767px) {

    .flow-payment {
        font-size: 13px;
        line-height: 1.75;
    }

    .flow-payment p,
    .flow-payment li,
    .flow-payment td,
    .flow-payment th,
    .flow-payment dd,
    .flow-payment dt {
        font-size: 13px;
    }

    .flow-payment h3,
    .flow-payment h4,
    .flow-payment h5 {
        font-size: 15px;
    }

}

/* お支払い案内：注意書きの余白調整 */
.flow-payment .bg_yellow {
    padding: 16px 20px !important;
    border-radius: 10px;
    line-height: 1.8;
}

/* 注意書き内の段落 */
.flow-payment .bg_yellow p {
    margin: 0 0 6px;
    line-height: 1.8;
}

.flow-payment .bg_yellow p:last-child {
    margin-bottom: 0;
}

/* スマートフォン */
@media screen and (max-width: 767px) {
    .flow-payment .bg_yellow {
        padding: 14px 15px !important;
    }
}

/* 保護者同意書ダウンロードボタン */
.flow-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 22px;
    margin: 12px 0;
    background: #087eae;
    color: #fff !important;
    border: 1px solid #087eae;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
}

.flow-download-btn:hover {
    background: #05658c;
    color: #fff !important;
    transform: translateY(-2px);
}

.flow-download-btn i {
    font-size: 17px;
    flex-shrink: 0;
}

.flow-download-btn span {
    font-size: 12px;
    font-weight: 400;
}

@media screen and (max-width: 767px) {
    .flow-download-btn {
        display: flex;
        width: 100%;
        padding: 14px 12px;
        font-size: 13px;
        gap: 7px;
    }
}