@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html


/* ========================================================== */
/* カスタムキャプションボックス（HTMLブロック用）の装飾 - 最終版 */
/* ========================================================== */

/* 1. 3列のレイアウト設定 */
.custom-orange-caption-wrapper {
    display: flex !important; 
    gap: 20px !important;    
    margin-block: 30px !important;
}

/* 2. 各ボックスアイテムの基本設定 */
.custom-caption-item {
    flex-basis: 33.33% !important; 
    min-width: 0 !important;       
    position: relative !important;
}

/* 3. リンク（ボックス本体）の装飾：共通のベース（オレンジ系） */
.custom-caption-link {
    display: block !important;
    text-decoration: none !important; 
    color: inherit !important;        
    padding: 20px !important;         
    background-color: #ffffff !important; 
    border-radius: 30px !important;   /* 大きな角丸 */
    
    /* 初期設定の枠線と影はオレンジ系 */
    border: 1px solid #ffaa88 !important; 
    box-shadow: 0 4px 10px -1px rgba(255, 170, 136, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.2s ease-in-out !important; 
    height: 100%; 
}

/* 4. アイコン周りの装飾：共通のベース（オレンジ系） */
.caption-icon-wrap {
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important; 
    text-align: center !important;
    /* アイコンの背景色を薄いベージュ/オレンジに */
    background-color: #fcece3 !important; 
    border-radius: 12px !important;
    margin-bottom: 15px !important;
}

/* 5. アイコン自体の色とサイズ：共通のベース（オレンジ系） */
.caption-icon-wrap i {
    color: #ff8c69 !important; 
    font-size: 28px !important; 
}

/* ------------------------------------------------------------------ */
/* ★★★ 真ん中のボックス（second-item）専用の青色設定 ★★★ */
/* ------------------------------------------------------------------ */
.second-item .custom-caption-link {
    border-color: #79a6d0 !important; /* 薄い青の枠線 */
    /* 青色の影を設定 */
    box-shadow: 0 4px 10px -1px rgba(121, 166, 208, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.06) !important;
}

.second-item .caption-icon-wrap {
    background-color: #e4f0fa !important; /* 非常に薄い青の背景 */
}

.second-item .caption-icon-wrap i {
    color: #79a6d0 !important; /* 薄い青のアイコンカラー */
}


/* ------------------------------------------------------------------ */
/* 6. ホバー時の効果：共通設定 (hover) */
/* ------------------------------------------------------------------ */
.custom-caption-link:hover {
    /* ホバー時の影を強調 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important; 
}
/* ホバー時、真ん中のボックスの影を青色で強調 */
.second-item .custom-caption-link:hover {
    box-shadow: 0 10px 15px -3px rgba(121, 166, 208, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.08) !important;
}


/* 7. テキストのスタイル (変更なし) */
.caption-title {
    font-size: 1.1em !important;
    font-weight: bold !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    color: #333 !important; 
}
.caption-text {
    font-size: 0.9em !important;
    line-height: 1.6 !important;
    color: #666 !important; 
}

/* 8. レスポンシブ対応 */
@media (max-width: 768px) {
    .custom-orange-caption-wrapper {
        flex-direction: column !important; 
        gap: 15px !important;
    }
}

/* ========================================================== */
/* 2段目のレイアウト調整 (2列表示) */
/* ========================================================== */

/* 2列表示のラッパー設定を上書き */
.custom-orange-caption-wrapper.second-row {
    margin-top: 30px !important; /* 上のボックスからの間隔を確保 */
}

/* 2列なので幅を半分に調整 */
.custom-orange-caption-wrapper.second-row .custom-caption-item {
    flex-basis: 50% !important; 
}

/* ========================================================== */
/* 得意分野！ボックスの強調表示（special-item） */
/* ========================================================== */

/* special-item のボックスの影を少し濃くする */
.special-item .custom-caption-link {
    /* 枠線は維持 */
    border: 1px solid #ffaa88 !important; 
    /* 影を少し濃くして強調 */
    box-shadow: 0 6px 15px -2px rgba(255, 170, 136, 0.4), 0 3px 6px -3px rgba(0, 0, 0, 0.08) !important;
}

/* 得意分野！タグのスタイル */
.special-item .special-tag {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.8em;
    font-weight: bold;
    color: #ffffff !important; /* 文字色を白に */
    background-color: #ff8c69 !important; /* オレンジの背景 */
    padding: 4px 12px;
    border-top-right-radius: 30px; /* ボックスの角丸に合わせて調整 */
    border-bottom-left-radius: 10px; /* 左下に丸みを追加 */
    line-height: 1;
    z-index: 10;
}

/* 箇条書きリストのスタイル */
.special-item .custom-list {
    list-style: none; /* デフォルトの点を消す */
    padding-left: 0;
    margin-top: 15px;
}
.special-item .custom-list li {
    font-size: 0.9em;
    color: #666;
    padding-left: 1.2em; /* カスタムマーカー用のスペース */
    position: relative;
    margin-bottom: 5px;
    line-height: 1.4;
}
/* カスタムのオレンジ色マーカー */
.special-item .custom-list li::before {
    content: "●"; 
    color: #ff8c69 !important; /* オレンジ色 */
    font-size: 0.7em;
    position: absolute;
    left: 0;
    top: 0.3em;
}

/* 8. レスポンシブ対応 (スマホでは縦に並べる) */
@media (max-width: 768px) {
    .custom-orange-caption-wrapper.second-row {
        flex-direction: column !important; 
        gap: 15px !important;
    }
    .special-item .special-tag {
        border-top-left-radius: 0; /* スマホでは角丸の調整を修正 */
    }
}

/* ========================================================== */
/* 2段目のレイアウト調整 (1:2の幅で2列表示) */
/* ========================================================== */

/* 2段目専用のラッパー設定 */
.custom-orange-caption-wrapper-2 {
    display: flex !important; /* Flexboxで横並びにする */
    gap: 20px !important;    /* ボックス間の間隔 */
    margin-block: 30px !important; /* 上下の余白 */
}

/* 2段目の幅の定義 */
/* 1/3幅のボックス (給与計算) */
.custom-orange-caption-wrapper-2 .one-third {
    flex-basis: calc((100% - 20px) / 3) !important; /* 1/3の幅 */
    min-width: 0 !important;
}
/* 2/3幅のボックス (派遣業許可) */
.custom-orange-caption-wrapper-2 .two-thirds {
    flex-basis: calc((100% - 20px) / 3 * 2) !important; /* 2/3の幅 */
    min-width: 0 !important;
}

/* ========================================================== */
/* 得意分野！ボックスの強調表示（special-item）の追加スタイル */
/* ========================================================== */

/* special-item のボックスの影を少し濃くする */
.special-item .custom-caption-link {
    /* 影を少し濃くして強調 (前回のCSSと重複しますが、確実に適用するため記述) */
    box-shadow: 0 6px 15px -2px rgba(255, 170, 136, 0.4), 0 3px 6px -3px rgba(0, 0, 0, 0.08) !important;
}

/* 得意分野！タグのスタイル */
.special-item .special-tag {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.8em;
    font-weight: bold;
    color: #ffffff !important; /* 文字色を白に */
    background-color: #ff8c69 !important; /* オレンジの背景 */
    padding: 4px 12px;
    border-top-right-radius: 30px; /* ボックスの角丸に合わせて調整 */
    border-bottom-left-radius: 10px; /* 左下に丸みを追加 */
    line-height: 1;
    z-index: 10;
}

/* 箇条書きリストのスタイル */
.special-item .custom-list {
    list-style: none; /* デフォルトの点を消す */
    padding-left: 0;
    margin-top: 15px;
}
.special-item .custom-list li {
    font-size: 0.9em;
    color: #666;
    padding-left: 1.2em; /* カスタムマーカー用のスペース */
    position: relative;
    margin-bottom: 5px;
    line-height: 1.4;
}
/* カスタムのオレンジ色マーカー */
.special-item .custom-list li::before {
    content: "●"; 
    color: #ff8c69 !important; /* オレンジ色 */
    font-size: 0.7em;
    position: absolute;
    left: 0;
    top: 0.3em;
}


/* 8. レスポンシブ対応 (スマホでは縦に並べる) */
@media (max-width: 768px) {
    .custom-orange-caption-wrapper-2 {
        flex-direction: column !important; 
        gap: 15px !important;
    }
    /* スマホでは幅の指定を解除 */
    .custom-orange-caption-wrapper-2 .custom-caption-item {
        flex-basis: auto !important;
    }
    .special-item .special-tag {
        border-top-left-radius: 0; 
    }
}
/* ========================================================== */
/* 画像アイコン（imgタグ）の調整 - 【最終修正版】 */
/* ========================================================== */
.custom-icon-img {
    /* 親要素のサイズ（60px x 60pxの範囲）いっぱいに広げる */
    width: 100% !important; 
    height: 100% !important;
    
    /* 画像を縦横比を維持したまま、親要素に収まるように調整 */
    object-fit: contain !important; 
    
    /* 親要素の中で画像を中央に配置する */
    display: block !important;
    margin: 0 !important; 
    
    /* 角丸の背景（caption-icon-wrap）との余白を作る（画像全体を少し小さく見せる） */
    padding: 10px !important; 
    box-sizing: border-box !important; /* paddingがサイズに含まれるようにする */
}