/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

@import url('./css/contact.css');

h1.entry-title {
    display: block;
}
.ast-single-entry-banner[data-post-type="post"] .entry-title {
    color: #ffffff;
}


/*トップ→*/
.top-container {
    /* 2つの要素を横に並べる */
    display: flex;
	justify-content: center;
}

/* 共通のスタイル */
.like-button {
    /* アイコンとテキストをインラインで表示し、縦方向の中央揃えを保証 */
    display: inline-flex;
    align-items: center;
    /* フォントサイズを30pxに設定 */
    font-size: 30px;
    line-height: 1; /* 行の高さを1に設定し、上下の余白を減らす */
}

/* アイコンのスタイル */
.like-button i {
    /* アイコンとテキストの間に少しスペースを開ける */
    margin-right: 5px;
    /* アイコンの色はデフォルトで灰色に近い色 */
    color: #6c757d; 
}

/* テキストのスタイル */
.like-button .text {
    /* テキストの色は個別に設定 */
    /* フォントサイズは親要素.like-buttonで設定されているため不要 */
}

/* 1つ目の要素: 緑色の設定 */
.like-button.green .text {
    color: #5cb85c; /* 緑色 */
}

/* 2つ目の要素: オレンジ色の設定 */
.like-button.orange .text {
    color: #f0ad4e; /* オレンジ色 */
}





/* triangleページメリット*/

/* コンテナ設定 */
.merit-container {
    display: flex;
    flex-wrap: wrap; 
    /* gap: 1px; を削除 - ボーダーで罫線を引くため */
    border: 1px solid #ccc; /* 外枠は維持 */
    max-width: 1000px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 個別のメリットアイテム */
.merit-item {
    display: flex;
    flex-direction: column;
    flex: 1 1 32%; 
    min-width: 250px; 
    box-sizing: border-box;
    text-align: center;
    
    /* === 右側に縦の罫線を追加 === */
    border-right: 1px solid #ccc; 
}

/* === 最後のアイテム (メリット3) の罫線を削除 === */
/* 広画面表示（横3列）の場合、3番目のアイテムの右側罫線を非表示にする */
.merit-item:nth-child(3) {
    border-right: none;
}


/* ヘッダー部分（変更なし） */
.merit-header {
    padding: 15px 10px;
    font-size: 1.2em;
    font-weight: bold;
    color: white; 
    background-color: #90ee90;
    border-bottom: 1px solid #ccc; 
}

/* ヘッダーの色違い */
.merit-color-1 { background-color: #98fb98; }
.merit-color-2 { background-color: #90ee90; }
.merit-color-3 { background-color: #8fbc8f; }


/* コンテンツ部分 */
.merit-content {
    padding: 20px;
    text-align: left; 
    line-height: 1.8;
    background-color: #fff;
    height: 100%; 
}

/* --------------------------------------
   レスポンシブ対応のためのメディアクエリ
   -------------------------------------- */

/* 画面幅が768px以下の場合 (スマートフォンやタブレット縦向きを想定) */
@media (max-width: 768px) {
    .merit-item {
        /* 幅を100%にして、縦一列に並ぶようにする */
        flex: 1 1 100%;
        min-width: unset; 
        
        /* === 修正点 3: 縦一列になったら、縦線（border-right）を削除 === */
        border-right: none;
    }

    /* === 修正点 4: 縦一列になったとき、それぞれの項目の下部に横線（border-bottom）を引く === */
    .merit-item:not(:last-child) {
        border-bottom: 1px solid #ccc;
    }
    
    /* 縦一列の場合、nth-child(3)の指定は不要になるが、念のためリセット */
    .merit-item:nth-child(3) {
        border-right: none;
    }
}





/* 会社概要*/


        /* ================================================= */
        /*協賛制度 */
        /* ================================================= */

/* 全体コンテナ */
.table-container {
	font-family: 'Inter';
    max-width: 900px; /* PCでの最大幅 */
    margin: 0 auto;
	    font-weight: 400;
    border: 1px solid #ccc; /* 枠線 */
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 各行のスタイル（Flexboxでセルを配置） */
.row {
    display: flex;
    border-bottom: 1px solid #ddd;
}

/* 最後の行の罫線を削除 */
.row:last-child {
    border-bottom: none;
}

/* セルの基本スタイル */
.header-cell,
.data-cell {
    padding: 15px 12px;
    box-sizing: border-box;
    /* セル内のテキストが見やすいように */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 見出しセル (左側) のスタイル */
.header-cell {
    background-color: #f5f5f5; /* 画像の左側の薄いグレー */
    flex-shrink: 0; /* 縮小させない */
    width: 30%; /* PC表示での幅 */
    font-weight: 400;
    border-right: 1px solid #ddd;
}

/* データセル (右側) のスタイル */
.data-cell {
    flex-grow: 1; /* 残りのスペースを全て使用 */
    width: 70%; /* PC表示での幅 */
}

/* 項目リストのスタイル調整 */
.data-cell ol {
    margin: 0;
    padding-left: 1.5em; /* リスト記号のためのインデント */
}
.data-cell ol li {
    margin-bottom: 5px;
}

/* リンクのスタイル */
.link-red {
    color: #cc0000; /* 赤色で強調 */
    text-decoration: none; /* 下線なし */
    font-weight: 400;
}
.link-red:hover {
    text-decoration: underline;
}

/* ------------------------------------------- */
/* レスポンシブ対応 (スマートフォン向け) */
/* ------------------------------------------- */
@media (max-width: 768px) {
    /* 画面幅が768px以下になったら、行の表示を縦積みにする */
    .row {
        flex-direction: column;
    }

    /* 見出しセル (左側) のスタイル調整 */
    .header-cell {
        width: 100%; /* 幅を100%に */
        border-right: none; /* 縦積みになったので右側の線は不要 */
        border-bottom: 1px solid #ddd; /* ヘッダーとデータの間を区切る線 */
        background-color: #eee; /* スマホではヘッダーを少し濃くして区別しやすく */
        padding: 10px 12px;
    }

    /* データセル (右側) のスタイル調整 */
    .data-cell {
        width: 100%; /* 幅を100%に */
        padding: 10px 12px;
    }

    /* 大容量コンテンツの行では、データセルとヘッダーセルの上下パディングを調整して見やすくする */
    .row-large-content .header-cell,
    .row-large-content .data-cell {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

        /* ================================================= */
        /*協賛制度 */
        /* ================================================= */



        /* 3つの柱のセクション */

        /* ================================================= */
        /* 共通スタイル */
        /* ================================================= */

        .coaching-container {
            max-width: 600px; /* 少し幅を広げました */
            margin: 0 auto;
            padding: 5% 3%; /* パディングをパーセント指定 */
            border: 1px solid #ddd;
            border-radius: 10px;
            font-family: 'Hiragino Sans', 'Meiryo', sans-serif;
            text-align: center;
            background-color: #fff;
            box-sizing: border-box; /* パディングを幅に含める */
        }

        .section-title {
            display: inline-block;
            padding: 5px 15px;
            margin-bottom: 30px;
            font-size: 1.4em;
            font-weight: bold;
            color: #ff9933;
            border: 1px solid #ff9933;
            border-radius: 20px;
            background-color: #fff;
        }

        /* ================================================= */
        /* 3つの円のセクション */
        /* ================================================= */

        .circles-section {
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
            margin-bottom: 40px;
            min-height: 200px;
            flex-wrap: nowrap; /* デフォルトは横並びを維持 */
        }

        .circle {
            width: 30%; /* 親要素に対するパーセント幅 */
            max-width: 200px; /* 最大サイズを制限 */
            padding-bottom: 30%; /* 円形を維持するためのパディング（幅と同じ値） */
            height: 0; /* 高さを0にして、パディングで円形を作る */
            position: relative;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            font-size: 1em;
            font-weight: bold;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            line-height: 1.2;
            box-sizing: border-box;
            margin: 5px; /* マージン追加 */
        }

        .circle-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            height: 90%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 各円の色 */
        .circle-orange { background-color: #ffcc66; }
        .circle-pink { background-color: #ffadad; }
        .circle-green { background-color: #99cc66; }
        
        /* 円の縦位置の調整（デスクトップ時のみ） */
        @media (min-width: 769px) {
            .circle-orange {
                margin-top: 20px;
				margin-bottom:40px;
            }
            .circle-pink, .circle-green {
                margin-top: 20px;
            }
        }


        /* ================================================= */
        /* 3つの柱のセクション */
        /* ================================================= */

        .pillars-section {
            margin-bottom: 40px;
            text-align: left;
        }

        .pillars-header {
            background-color: #ff9933;
            color: white;
            padding: 10px;
            font-size: 1.2em;
            font-weight: bold;
            text-align: center;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .pillars-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 1em;
            display: table; /* デフォルトは表 */
        }

        .pillars-table td {
            border: 1px solid #ff9933;
            padding: 15px 10px;
            text-align: center;
            vertical-align: top;
            background-color: #fff5e6;
            height: 100%; /* 高さを確保 */
            box-sizing: border-box;
            width: 33.333%;
        }

        /* ================================================= */
        /* メンタルコーチによる対話型サポート */
        /* ================================================= */

        .support-section {
            padding-top: 20px;
            text-align: left;
        }

        .support-title {
            font-size: 1.4em;
            font-weight: bold;
            color: #ff9933;
            text-align: center;
            margin-bottom: 20px;
        }

        .support-text p {
            font-size: 0.9em;
            line-height: 1.8;
            color: #333;
            margin-bottom: 15px;
            padding: 0 5px; /* 左右に少しパディング */
        }
        
        .support-text strong {
            font-weight: bold;
            color: #ff9933;
        }

        /* ================================================= */
        /* レスポンシブ対応 (画面幅 768px 以下) */
        /* ================================================= */

        @media (max-width: 768px) {
            .coaching-container {
                padding: 5%;
            }

            /* 3つの円を縦に並べる */
            .circles-section {
                flex-direction: column; /* 縦並びに変更 */
                align-items: center; /* 中央揃え */
                min-height: auto;
                margin-bottom: 20px;
            }

            .circle {
                width: 70%; /* 幅を広げる */
                max-width: 300px; /* 最大サイズ */
                padding-bottom: 70%; /* 円形を維持 */
                margin-bottom: 15px; /* 縦並びなので下マージン */
                font-size: 1.2em;
            }
            
            /* 縦並びになったので位置調整は不要 */
            .circle-orange, .circle-pink, .circle-green {
                margin-top: 0;
            }

            /* 3つの柱の表を縦積みにする */
            .pillars-table, .pillars-table tbody, .pillars-table tr, .pillars-table td {
                display: block; /* テーブル要素をブロック要素に変更 */
                width: 100%; /* 幅をいっぱいに広げる */
            }

            .pillars-table td {
                border-left: none; /* 縦積みになったら左右の線は不要 */
                border-right: none;
                /* 上下の線だけを残す */
            }

            .pillars-table tr:first-child td:first-child {
                 border-top: 1px solid #ff9933; /* 最初の要素に上の線を追加 */
            }
        }



        /* ================================================= */
        /*メンタルヘルス相談窓口 */
        /* ================================================= */

/* 基本設定 */


.container {
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid #ddd;
    background-color: #fff;
}
.content p{
    font-weight: 400;
}

/* 行のレイアウト */
.row {
    display: flex;
    border-bottom: 1px solid #ddd;
}

.row:last-child {
    border-bottom: none;
}

/* 左側のグレーラベル */
.label {
    width: 280px;
    background-color: #ededed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-size: 1.2rem;
    font-weight: 400;
    text-align: center;
}

/* 右側のコンテンツエリア */
.content {
    flex: 1;
    padding: 40px;
}

.content p {
    margin: 0 0 10px 0;
}

/* 料金セクションの横並び調整 */
.pricing-section {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.description {
    flex: 1;
}

/* 料金テーブルのスタイル */
.price-table {
    width: 280px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.price-table th, .price-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

.price-table th {
    background-color: #ededed;
    font-weight: 400;
}

/* モバイル対応：画面が狭い時に縦並びにする */
@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }
    .label {
        width: 100%;
        padding: 15px;
    }
    .pricing-section {
        flex-direction: column;
    }
    .price-table {
        width: 100%;
        margin-top: 20px;
    }
}


        /* ================================================= */
        /*メンタルヘルス相談窓口ここまで */
        /* ================================================= */


        /* ================================================= */
        /*EQ/SQを学ぶメリット　ここから */
        /* ================================================= */


.eq-sq-container {
            max-width: 800px;
            margin: 20px auto;
            font-family: 'Inter';
            border: 1px solid #222;
            background-color: #fff;
	            font-weight: 400;
        }

        /* ヘッダー部分 */
        .eq-header {
            background-color: #ff9f51; /* オレンジ色 */
            color: white;
            text-align: center;
            padding: 15px;
            font-size: 32px;
            font-weight: 400;
            letter-spacing: 0.1em;
			border: 1px solid #000;
            border-bottom: none;
        }

        /* グリッド（枠組み）の作成 */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(6, 1fr); /* 6分割して柔軟に配置 */
        }

        /* 共通のセルスタイル */
        .cell {
            padding: 25px 15px;
            border: 1px solid #000;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1.6;
            font-size: 18px;
            font-weight: 400;
            text-align: left;
        }

        /* 上段 3つのセル */
        .top-cell {
            grid-column: span 2;
        }
        .top-cell:not(:last-child) {
            border-right: 1px solid #000;
        }

        /* 下段 2つのセル */
        .bottom-cell {
            grid-column: span 3; /* 3マス分（半分）使う */
        }
        .bottom-cell:first-child {
            border: 1px solid #000;
        }

        /* スマホ対応：画面が狭いときは1列にする */
        @media (max-width: 600px) {
           .eq-header {
            font-size: 24px;
        }

            .grid-container {
                display: block;
            }
            .cell {
                grid-column: span 6;
                border-bottom: 1px solid #000;
            }
        }


        /* ================================================= */
        /*EQ/SQを学ぶメリット　ここまで */
        /* ================================================= */