/* 入会までの流れセクション */
.join-flow-section-boxed {
    background-color: transparent;
}

/* widget間のmargin */
.join-flow-element.join-flow-widget:not(:last-child) {
    margin-block-end: 20px;
    margin-bottom: 20px;
}

.join-flow-bg {
    background-image: url('/school/img/back-green-title.png');
    background-size: cover;
}

/* タイトルセクションのpadding */
.join-flow-section[data-id="7afdf998"] {
    padding: 0 !important;
}

/* メインのコンテンツセクション（背景画像あり） */
.join-flow-section[data-id="6f1fbc43"] {
    background-image: url('/school/img/back-white.png');
    background-size: cover;
    background-color: transparent;
    padding: 57px 0 76px !important;
}

/* 動画セクション（黄色い背景のみ、背景画像なし） */
.join-flow-section[data-id="4e6f6dcb"] {
    background-color: #FFFF00;
    background-image: none !important;
    padding: 3% 0% 5% 0%;
}

.join-flow-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
}

/* PC/タブレット版のみ - 子要素にpadding適用 */
.join-flow-column-gap-default > .join-flow-column > .join-flow-element-populated {
    padding: 0 10px;
}

.join-flow-column-gap-default {
    gap: 20px;
}

.join-flow-column {
    text-align: center;
}

.join-flow-col-100 {
    width: 100%;
    text-align: center;
    display: block;
}

/* タイトル画像 */
.join-flow-widget-container {
    text-align: left;
    width: 100%;
}

.join-flow-widget-image {
    text-align: center;
}

.join-flow-widget-image .join-flow-widget-container {
    text-align: center;
    display: block;
    width: 100%;
}

/* 画像側のカラムだけ中央寄せ */
.join-flow-col-50:first-child .join-flow-widget-container {
    text-align: center;
}

/* タイトル画像 */
.join-flow-widget-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* タイトル画像のwidget-containerのpadding */
.join-flow-element[data-id="45be4828"] > .join-flow-widget-container {
    padding: 22px;
}

/* 入会手順動画タイトル */
.join-flow-element[data-id="5ae9e153"] > .join-flow-widget-container {
    padding: 0% 0% 2% 0%;
}

/* ステップボックス */
.join-flow-step-bg {
    background-color: #FFFFFF;
    border: 10px solid #000000;
    margin: 0 0 2% 0;
    padding: 2% 4%;
}

/* 2カラムレイアウト */
.join-flow-step-bg .join-flow-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.join-flow-col-50 {
    display: flex;
}

.join-flow-col-50:first-child {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.join-flow-col-50:last-child {
    width: 100%;
}

/* タブレット以上 */
@media (min-width: 768px) {
    .join-flow-col-50:first-child {
        width: 35%;
    }
    
    .join-flow-col-50:last-child {
        width: 65%;
    }
    
    /* PC限定の動画セクションpadding */
    .join-flow-section[data-id="4e6f6dcb"] {
        padding: 57px 0 76px !important;
    }
    
    /* PC限定の入会手順動画タイトルpadding */
    .join-flow-element[data-id="5ae9e153"] > .join-flow-widget-container {
        padding: 0 0 22px;
    }
}

/* カラム内のpadding */
.join-flow-column-gap-default > .join-flow-column > .join-flow-widget-wrap {
    padding: 10px;
}

.join-flow-widget-wrap.join-flow-element-populated {
    display: flex;
    flex-direction: column;
    justify-content: normal;
    align-items: flex-start;
}

/* 画像側のカラムだけ中央寄せ */
.join-flow-col-50:first-child .join-flow-widget-wrap.join-flow-element-populated {
    align-items: center;
}

.join-flow-widget-wrap > .join-flow-element {
    width: 100%;
}

/* ステップ画像 */
.join-flow-step-bg .join-flow-widget-image img {
    width: 200px;
    max-width: 100%;
    height: auto;
}

/* ステップタイトル */
.join-flow-heading-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 2em;
    color: #0A8F20;
    text-align: left;
}

/* join-flow-section内のすべてのh2のmargin-bottomを削除 */
.join-flow-section h2 {
    margin-bottom: 0 !important;
}

/* ディバイダー */
.join-flow-divider {
    border-top: 4.5px solid #000;
    width: 100%;
    padding: 2px 0;
}

/* テキスト */
.join-flow-widget-text-editor {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 2em;
    color: #000000;
    text-align: left;
}

.join-flow-widget-text-editor p {
    line-height: 2em;
    margin-bottom: 14.4px;
}

/* スクロール矢印 */
.join-flow-widget-image[data-id="672bb1b6"] img,
.join-flow-widget-image[data-id="d6be455"] img,
.join-flow-widget-image[data-id="648b0f20"] img {
    height: auto;
    width: auto;
    margin: 20px auto;
}

/* 入会手順動画セクション（既に上部で定義済み） */

.join-flow-widget-image[data-id="5ae9e153"] img {
    height: 80px;
}

.join-flow-video {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    display: block;
}

/* レスポンシブ - タブレット */
@media (max-width: 1100px) {
    .join-flow-step-bg {
        border-width: 6px;
    }
    
    .join-flow-step-bg .join-flow-widget-image img {
        width: 190px;
        max-width: 100%;
    }
    
    .join-flow-heading-title {
        font-size: 20px;
    }
    
    .join-flow-widget-text-editor {
        font-size: 14px;
        line-height: 1.7em;
    }
    
    .join-flow-widget-image[data-id="5ae9e153"] img {
        height: 50px;
    }
}

/* レスポンシブ - モバイル */
@media (max-width: 767px) {
    /* data-id="6f1fbc43"の上下paddingをスマホ用に調整 */
    .join-flow-section[data-id="6f1fbc43"] {
        padding: 15px 0 !important;
    }
    
    /* data-id="6f1fbc43"直下のjoin-flow-containerにスマホ用padding */
    .join-flow-section[data-id="6f1fbc43"] > .join-flow-container {
        padding: 0 10px;
    }
    
    /* data-id="4e6f6dcb"のスマホ用padding */
    .join-flow-section[data-id="4e6f6dcb"] {
        padding: 7% 0% 5% 0% !important;
    }
    
    /* data-id="4e6f6dcb"直下のjoin-flow-containerにスマホ用padding */
    .join-flow-section[data-id="4e6f6dcb"] > .join-flow-container {
        padding: 0 10px;
    }
    
    /* モバイルでは子要素のpaddingを削除 */
    .join-flow-column-gap-default > .join-flow-column > .join-flow-element-populated {
        padding: 0;
    }
    
    .join-flow-section {
        padding-left: 1%;
        padding-right: 1%;
    }
    
    .join-flow-widget-image img {
        height: 35px;
    }
    
    .join-flow-col-50 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .join-flow-col-50:first-child {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .join-flow-step-bg {
        padding: 4% 6%;
    }
    
    /* ステップ画像の幅制限（スマホ） */
    .join-flow-step-bg .join-flow-widget-image img {
        width: 190px;
        max-width: 100%;
    }
    
    .join-flow-heading-title {
        font-size: 20px;
    }
    
    .join-flow-widget-image[data-id="5ae9e153"] img {
        height: 50px;
    }
    
    .join-flow-widget-text-editor p {
        font-size: 14px;
        line-height: 1.7em;
    }
    
    /* タイトル画像のスマホ用サイズ調整 */
    .join-flow-element[data-id="45be4828"] img {
        height: 40px;
    }
    
    /* ディバイダー要素のスマホ用margin調整 */
    .join-flow-element.join-flow-widget.join-flow-widget-divider--view-line:not(:last-child) {
        margin-block-end: 10px;
        margin-bottom: 10px;
    }
}