@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.workflow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px 0;
}

.step {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    width: 150px;
    box-sizing: border-box;
    position: relative;
}

/* CSSで矢印を作成 */
.arrow {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 20px solid #333;
    margin: 0 10px;
}

.privacy-text-box {
            width: 100%;    /* 定型枠の幅 */
            height: 200px;   /* 定型枠の高さ */
            padding: 10px;   /* 内側の余白 */
            border: 2px solid #000;  /* 枠線のスタイル */
            overflow-y: scroll; /* 縦方向にスクロールを追加 */
            background-color: #f9f9f9; /* 背景色 */
        }
/* 文字色を変更するクラス */
.text-primary {
    color: #0d6efd !important; /* ブルー */
}

.text-secondary {
    color: #6c757d !important; /* グレー */
}

.text-success {
    color: #198754 !important; /* グリーン */
}

.text-danger {
    color: #dc3545 !important; /* レッド */
}

.text-warning {
    color: #ffc107 !important; /* イエロー */
}

.text-info {
    color: #0dcaf0 !important; /* ライトブルー */
}

.text-light {
    color: #f8f9fa !important; /* ホワイト */
}

.text-dark {
    color: #212529 !important; /* ダークグレー */
}

.text-muted {
    color: #6c757d !important; /* ミュートされたグレー */
}

.text-white {
    color: #ffffff !important; /* ホワイト */
}

.text-black {
    color: #000000 !important; /* ブラック */
}

.text-body {
    color: #212529 !important; /* デフォルトのボディーテキストカラー */
}

.text-black-50 {
    color: rgba(0, 0, 0, 0.5) !important; /* 半透明ブラック */
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important; /* 半透明ホワイト */
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 1023px以下 */
@media (max-width: 1023px) {
    .step {
        padding: 15px;
        margin: 8px;
    }
    .arrow {
        border-left: 15px solid #333;
        margin: 0 8px;
    }
}

/* 834px以下 */
@media (max-width: 834px) {
    .workflow {
        flex-direction: column;
        align-items: flex-start;
    }
    .arrow {
        display: none;
    }
    .step {
        width: 100%;
    }
}

/* 480px以下 */
@media (max-width: 480px) {
    .step {
        width: 100%;
        padding: 10px;
        font-size: 14px;
    }
}