/* --- 募集要項エリアのベース --- */
.recruit-box .inr {
    max-width: 1000px;
    margin: 0 auto;
}

.fld-box {
    display: flex;
    flex-wrap: wrap; /* スマホで折り返すように */
    padding: 30px 0;
    border-bottom: 1px solid #e0e0e0; /* 区切り線 */
}

/* 最後の線は消す */
.fld-box.border-none {
    border-bottom: none;
}

.fld-tit {
    font-size: 1.8rem;
    width: 270px;
    font-weight: bold;
    color: #333;
    /* 【変更点】左側にアクセントの棒を入れる（オレンジに変更） */
    border-left: 5px solid #e98503; 
    padding-left: 15px;
    line-height: 1.6;
}

.fld-con {
    font-size: 1.8rem;
    width: calc(100% - 270px);
    line-height: 1.8;
}

/* --- 中身の装飾 --- */
.fld-con strong {
    display: block;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    border-bottom: 2px solid #eee; /* 下線で見出しっぽく */
    padding-bottom: 5px;
    margin-top: 20px;
}
.fld-con strong:first-child {
    margin-top: 0;
}

/* リスト（・）のデザイン */
.list-dot {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.list-dot li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 5px;
}
.list-dot li::before {
    content: '・';
    position: absolute;
    left: 0;
    color: #333;
}

/* リスト（チェックマーク）のデザイン */
.list-check {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.list-check li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 8px;
}
.list-check li::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 10px;
    /* 【変更点】チェックの色（オレンジに変更） */
    border-bottom: 2px solid #e98503; 
    border-right: 2px solid #e98503;
    transform: rotate(45deg);
}

/* 入れ子のリスト */
.sub-list {
    margin-top: 5px;
    margin-left: 0;
    font-size: 0.95em;
    color: #666;
}

/* 給与の強調 */
.price {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

/* 注釈など */
.small-text {
    font-size: 0.85em;
    color: #888;
}
.note {
    font-weight: bold;
    color: #333;
}


/* --- 応募パーツ全体の枠 --- */
.recruit-cta {
    text-align: center;
    font-family: "Helvetica Neue", Arial, sans-serif;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* --- 上部の営業時間 --- */
.cta-hours {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0 0 5px 0;
    color: #000;
}

/* --- メッセージと斜め線のエリア --- */
.cta-message-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.cta-message {
    font-size: 2.2rem;
    font-weight: bold;
    padding: 0 30px;
    margin: 0;
}

/* 斜めの線 */
.slash {
    display: block;
    width: 2px;
    height: 14px;
    background-color: #000;
}
.slash.left { transform: rotate(-25deg); }
.slash.right { transform: rotate(25deg); }


/* --- オレンジのボタン本体 --- */
.cta-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e6a95c;
    color: #fff;
    text-decoration: none;
    border-radius: 100px;
    padding: 25px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s;
    box-sizing: border-box;
}

.cta-button:hover {
    opacity: 0.9;
}

/* 中央にまとめるグループ（アイコン＋番号） */
.btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* アイコンと番号の間隔 */
}

/* 電話番号文字 */
.phone-number {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* --- アイコン(SVG)の設定 --- */
.icon-svg {
    display: block;
    fill: currentColor;
}

.icon-svg.phone {
    width: 20px;
    height: 20px;
    transform: rotate(20deg);
}

/* 矢印アイコン（右端に固定） */
.icon-svg.arrow {
    position: absolute; /* ボタン内で絶対配置 */
    right: 20px;        /* 右端から20pxの位置 */
    top: 50%;           /* 上下の真ん中 */
    transform: translateY(-50%); /* 完全に中央にする補正 */
    width: 12px;
    height: 12px;
}
@media screen and (max-width: 984px) {
    /* --- 全体の調整 --- */
    .recruit-cta {
        /* スマホやと画面端ギリギリは窮屈やから、ちょっと余白あける */
        padding: 0 16px;
        max-width: 330px; /* 念のため親要素に合わせる */
    }

    /* --- テキストサイズの縮小 --- */
    .cta-hours {
        /* 1.6rem → 1.2rem くらいに抑える */
        font-size: 1.6rem;
    }

    .cta-message-wrap {
        /* メッセージ周りの隙間を詰める */
        gap: 8px;
        margin-bottom: 10px;
    }

    .cta-message {
        /* 2.2remはスマホやとデカすぎて溢れるから小さく */
        font-size: 1.6rem;
        /* 横の余白も減らす */
        padding: 0 10px;
    }

    /* 斜め線も少し控えめに */
    .slash {
        height: 10px;
    }

    /* --- ボタン周りの調整 --- */
    .cta-button {
        /* 指で押しやすいサイズは保ちつつ、ちょっとだけスリムに */
        padding: 18px 15px;
    }

    .phone-number {
        /* 26pxやとiPhone SEとかでキツいかもしれんから調整 */
        font-size: 2.6rem;
    }

    /* アイコンもバランス見て微調整 */
    .icon-svg.phone {
        width: 18px;
        height: 18px;
    }
    
    .icon-svg.arrow {
        right: 15px; /* 右端の距離も少し詰める */
    }
}

/* --- スマホ対応 (984px以下) --- */
@media screen and (max-width: 984px) {
    .fld-box {
        padding: 20px 0;
        display: block; /* 縦積みに変更 */
    }

    .fld-tit {
        width: 100%;
        margin-bottom: 15px;
        background-color: #f9f9f9; /* スマホでは背景色をつけて見出しっぽく */
        padding: 10px 15px;
        /* 【変更点】スマホ時の左の棒（オレンジに変更） */
        border-left: 5px solid #e98503;
    }

    .fld-con {
        width: 100%;
        padding-left: 10px; /* 少しインデント */
    }
}