/* workshop.css */

/* 共通前提条件リスト内のリンク */
.common-prerequisite-list a {
    color: #007bff; /* 青字 */
    text-decoration: underline; /* 下線あり */
}

/* Q/Aのアイコンとテキストの配置調整 (よくあるご質問用) */
.faq-item {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px dashed #eee;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question, .faq-answer {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    font-size: 1.05em;
}

/* Qのスタイル */
.faq-question {
    font-weight: bold;
    color: #007bff; /* この色はQのテキスト本体に適用されますが、アイコンは上書きされます */
}

.faq-question span {
    flex-grow: 1;
    margin-top: 0.5em;
    margin-left: 1em; /* アイコン分のスペースを確保 */
}

.faq-question::before {
    content: 'Q'; /* Qを表示 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-right: 8px;
    flex-shrink: 0;
    font-size: 2em; /* Qの文字サイズ */
    font-weight: bold;
    color: white; /* Qの文字色を白に */
    background-color: #CC0000; /* Qの背景色を濃い赤に */
    /* border-radius: 50%; を削除して四角にする */
}


/* Aのスタイル */
.faq-answer {
    color: #555;
    line-height: 1.7;
    /* Qのアイコン幅(48px) + Qのmargin-right(8px) + 追加でずらす量(例: 20px) */
    padding-left: calc(48px + 8px + 20px);
    position: relative; /* Aの疑似要素の基準位置 */
}

.faq-answer::before {
    content: 'A'; /* Aを表示 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    position: absolute; /* 相対位置の親要素に対して絶対配置 */
    /* Qのアイコン幅(48px) + Qのmargin-right(8px) と同じ位置から開始するために0ではなく、ずらす量(例: 20px)を設定 */
    left: 20px; /* 親要素の左端から20pxずらす */
    top: 0; /* 親要素の上端に配置 */
    font-size: 2em; /* Aの文字サイズ */
    font-weight: bold;
    color: white; /* Aの文字色を白に */
    background-color: #FF8C00; /* Aの背景色を濃いオレンジに */
    /* border-radius: 50%; を削除して四角にする */
}

.faq-answer span {
    flex-grow: 1;
    margin-top: 0.5em;
    margin-left: 1em;
}


.features-list {
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: flex-start; /* アイテム全体を左揃えに変更 */
    border: none; /* セルの枠線を削除 */
    gap: 20px;
}

.features-list .feature-item {
    width: 100%;
    max-width: 700px;
    padding: 20px;
    border: none; /* セルの枠線を削除 */
    background-color: #fff;
    display: flex;
    align-items: center; /* アイコンとテキストコンテンツを垂直中央に揃える */
    text-align: left; /* feature-item内のテキストは左揃え */
}

/* POINT吹き出しのスタイル */
.feature-point-balloon {
    position: relative;
    width: 80px; /* point01.htmlのサイズ */
    height: 80px; /* point01.htmlのサイズ */
    background-color: #0d4b6f; /* point01.htmlの背景色 */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    flex-shrink: 0; /* 縮まないようにする */
    margin-right: 15px; /* 元のpoint-imageと同じマージン */
    border-radius: 50%; /* 丸い背景に変更 */
}

.feature-point-balloon::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px; /* 吹き出しのしっぽの位置 */
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #0d4b6f; /* 吹き出しと同じ色 */
}

.feature-point-balloon .small-text {
    font-size: 12px; /* point01.htmlのフォントサイズ */
    line-height: 1;
}

.feature-point-balloon .large-text {
    font-size: 32px; /* point01.htmlのフォントサイズ */
    line-height: 1;
}

/* 矢印のCSSスタイル */
.feature-description {
    position: relative; /* 擬似要素の基準位置 */
    /* 矢印+スペースを考慮してテキストの開始位置を調整 */
    padding-left: 2.8em; /* 矢印の幅(約2.2em) + 適切な隙間を確保 (例: 0.6em) */
    font-size: 0.95em; /* 元々存在したフォントサイズを再定義 */
    color: #666; /* 元々存在した文字色を再定義 */
}

.feature-description::before {
    content: '→'; /* 矢印文字 */
    position: absolute;
    left: 0; /* 矢印の開始位置 */
    top: 50%; /* 垂直中央に配置 */
    transform: translateY(-50%); /* 垂直中央に微調整 */
    font-size: 2.2em; /* 矢印のサイズを画像に合わせて調整 */
    color: #66CCCC; /* 画像に合わせて水色に変更 */
    line-height: 1; /* 行の高さを設定し、垂直方向のずれを防ぐ */
    font-weight: bold; /* 矢印を太字に */
}


.features-list .feature-content {
    flex-grow: 1;
    text-align: left; /* ここが特徴のテキストコンテンツの左揃えを決定 */
}

.features-list .feature-title {
    font-size: 1.3em;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
}


.workshop-intro-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    margin-bottom: 50px;
}

.workshop-intro-table th, .workshop-intro-table td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
    vertical-align: top;
}

.workshop-intro-table th {
    background-color: #f0f0f0;
    font-weight: bold;
    /* width: 180px; */ /* 幅指定を削除し、flex-basisで調整 */
    flex-basis: 33.33%; /* 左から3分の1 */
    white-space: nowrap;
    vertical-align: middle; /* 名称の高さ（th）を中揃えに */
}

.workshop-intro-table .workshop-category {
    font-weight: bold;
    color: #333;
    /width: 180px; */ /* 幅指定を削除し、flex-basisで調整 */
    flex-basis: 33.33%; /* 左から3分の1 */
    vertical-align: middle; /* 名称の高さ（td）はtopに戻す (pタグとボタンが縦に並ぶため) */
    position: relative; /* 詳細はこちらボタンの配置基準 */
    padding-bottom: 40px; /* ボタンのためのスペースを確保 */
}

.workshop-intro-table .workshop-category p {
    margin-top: 0;
    margin-bottom: 10px; /* ボタンとの間のマージン */
    padding-left: 0.5em; /* 1文字分右にずらす */
}

.workshop-intro-table .workshop-category .detail-link-button {
    display: inline-block;
    color:  white; /* 白字 */
    background-color: #800080; /* 紫色のバック */
    padding: 5px 10px;
    border-radius: 8px; /* 角丸 */
    font-size: 0.9em;
    white-space: nowrap;
    transition: background-color 0.3s ease;
    position: static; /* 絶対配置 */
    left: 15px; /* 親tdの左端からの位置 */
    text-decoration: none; /* 下線をなくす */
}

.detail-link-button:hover {
    background-color: #6a006a; /* ホバー時の色を少し濃く */
}

.workshop-intro-table ol {
    list-style-type: decimal;
    padding-left: 2.5em;
    margin: 0;
}
.workshop-intro-table ol li {
    margin-bottom: 5px;
}
.workshop-intro-table ol li:last-child {
    margin-bottom: 0;
}


/* お問い合わせからの流れ (flow-table) */
.flow-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    margin-bottom: 50px;
    border: none; /* テーブル全体の枠線を削除 */
}

.flow-table th, .flow-table td {
    padding: 10px 0px;
    text-align: left;
    vertical-align: middle;
    border: none; /* セルの枠線を削除 */
}

/* フロー図の吹き出しスタイル */
.flow-balloon {
    position: relative;
    background-color: #225577;
    color: white;
    padding: 20px 0; /* 左右のpaddingはwidthで調整するため0にする */
    border-radius: 15px;
    display: block; /* block要素にしてwidthを適用 */
    width: 160px; /* 全ての吹き出しの横幅を揃えるために固定値を設定 */
    margin: 0 auto; /* 中央揃えにする */
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    overflow: visible;
    white-space: nowrap; /* テキストが改行されないように */
}

.flow-balloon::after {
    content: "";
    position: absolute;
    bottom: -10px; /* 吹き出しの下に配置 */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #225577; /* 三角形の色 */
}

/* フローテーブルのthのパディングをリセットし、吹き出しが中央に来るように調整 */
.flow-table th {
    background-color: transparent;
    font-weight: normal;
    width: 180px; /* 吹き出しの幅に合わせて調整、あるいは固定しない */
    white-space: nowrap;
    vertical-align: top; /* 吹き出しとテキストが上端揃えになるように */
    padding: 20px 0; /* 上下にスペースを追加 */
    text-align: center; /* 吹き出しがth内で中央にくるように */
}

/* 最後のthの下パディングを調整（必要であれば） */
.flow-table tr:last-child th {
    padding-bottom: 0;
}

.contact_button_wrapper {
  text-align: center;
  align-items: center;
}

.contact_button {
    display: inline-block;
    background-color: rgba(137, 59, 195);
    padding: 0.8em 1.5em 0.7em;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-size: 20px;
    letter-spacing: 5px;
    line-height: 1.1;
    border-radius: 0.5rem;
}

/* 開発(PM)系ワークショップのタイトルスタイル (02.html, 03.html, 04.html用) */
.workshop-category-title {
    background-color: #8B0000;
    color: #fff;
    padding: 10px 20px;
    text-align: left;
    font-size: 1.8em;
    margin: -30px -40px 40px -40px;
    line-height: 1.2;
}

/* 02.html, 03.html, 04.html用コース詳細冒頭のpタグ */
.main-content > p:first-of-type {
    margin-bottom: 2em;
    text-align: left;
}

.course-section {
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px dashed #eee;
    position: relative;
}

.course-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.course-title-block {
    display: flex;
    align-items: baseline;
    margin-bottom: 20px;
    position: relative;
}

.course-title-block .bullet-point {
    font-size: 2em;
    color: #DC143C;
    font-weight: bold;
    margin-right: 10px;
    line-height: 1;
}

.course-title-block h3 {
    font-size: 1.5em;
    color: #333;
    margin: 0;
    font-weight: bold;
    flex-grow: 1;
}

.course-duration {
    position: absolute;
    /* top: 50%; :/
    /*transform: translateY(-50%); */
    right: 0px;
    background-color: #DC143C;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: bold;
    white-space: nowrap;
}


/* テーブルのスタイル (コース詳細内) */
.course-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.95em;
}

.course-table th, .course-table td {
    border: 1px solid #ddd;
    padding: 10px 15px;
    text-align: left;
    vertical-align: top;
}

.course-table th {
    background-color: #f0f0f0;
    font-weight: bold;
    width: 120px;
    white-space: nowrap;
}

.course-table td ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.course-table td li {
    margin-bottom: 5px;
    position: relative;
    padding-left: 15px;
}
.course-table td li::before {
    content: '・';
    position: absolute;
    left: 0;
    color: #555;
}
.course-table td ul.no-bullet li::before {
    content: none;
    padding-left: 0;
}
.course-table td ul.no-bullet li {
    padding-left: 0;
}

/* コース詳細内のリンク */
.course-table td ul a {
    color: #007bff;
    text-decoration: underline;
}

.course-table .note {
    font-size: 0.85em;
    color: #888;
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 0;
}
.course-table .note::before {
    content: none;
}

.course-table a {
    color: #007bff;
    text-decoration: underline;
}