/* 番号付きフレームシステム */

/* 基本設定 */
:root {
    --frame-padding-x: 20px;
    --frame-padding-y: 20px;
}

/* 共通フレームスタイル */
.number-frame {
    position: relative;
    text-align: center;
}

/* 番号スタイル */
.flow-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.flow-number i {
    font-size: 3rem;
    color: var(--color-primary);
    position: relative;
}

.flow-number i::before {
    position: relative;
    z-index: 1;
}

.flow-number i::after {
    content: attr(data-number);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: rgb(82, 82, 82);
    z-index: 2;
    font-style: normal;
}

/* 画像付きフレーム */
.num-pic-frame1, .num-pic-frame2, .num-pic-frame3, .num-pic-frame4 {
    overflow: hidden;
}

.num-pic-frame1 .flow-image, .num-pic-frame2 .flow-image, 
.num-pic-frame3 .flow-image, .num-pic-frame4 .flow-image {
    width: calc(100% + var(--frame-padding-x) * 2);
    height: 250px;
    object-fit: cover;
    border-radius: 15px 15px 0 0;
    margin-left: calc(var(--frame-padding-x) * -1);
    margin-right: calc(var(--frame-padding-x) * -1);
    margin-top: calc(var(--frame-padding-y) * -1);
    margin-bottom: 20px;
    display: block;
}

.num-pic-frame1 .flow-number, .num-pic-frame2 .flow-number,
.num-pic-frame3 .flow-number, .num-pic-frame4 .flow-number {
    top: 230px;
}

.num-pic-frame1 h3, .num-pic-frame2 h3, 
.num-pic-frame3 h3, .num-pic-frame4 h3 {
    margin-top: 35px;
}

/* テキストのみフレーム */
.num-txt-frame1 h3, .num-txt-frame2 h3, 
.num-txt-frame3 h3, .num-txt-frame4 h3 {
    margin-top: 25px;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
    .flow-number i {
        font-size: 2.5rem;
    }
    
    .flow-number i::after {
        font-size: 1.2rem;
    }
}


/* フロー1のpタグのみ左寄せ */
.num-pic-frame1 p {
    text-align: left !important;
}


/*
使用例：
<div class="frame3 number-frame num-pic-frame1">
    <img src="images/flow1.jpg" class="flow-image">
    <div class="flow-number">
        <i class="fas fa-circle" data-number="1"></i>
    </div>
    <h3 class="h3-center">タイトル</h3>
    <p class="p-center">テキスト</p>
</div>

<div class="frame7 number-frame num-txt-frame2">
    <div class="flow-number">
        <i class="fas fa-circle" data-number="2"></i>
    </div>
    <h3 class="h3-center">タイトル</h3>
    <p class="p-center">テキスト</p>
</div>
*/