@charset "UTF-8";
.anchor {
  scroll-margin-top: 10px; /* 固定ヘッダーの高さ分 */
}

.containers {
    width: 100%;
    max-width: 1200px;
    padding: 100px 20px 60px;
    margin: 0 auto;
}
/* タグ */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #dca29c;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    margin-bottom: 16px;
    width: auto;
/*    max-width: 320px;*/
}
.tag.web {
    background: #dca29c;
}
.tag.doga {
    background: #b45d67;
}
.tag.ai {
    background: #24a9a7;
}
.tag.market {
    background: #04495e;
}
.tag.comm {
    background: #c79d68;
}
.tag.risk {
    background: #e6c94e;
}
.tag.system {
    background: #e78b2b;
}
.tag.shinsotsu {
    background: #95c96f;
}
.tag-icon {
    width: 30px;
    height: auto;
    display: block;
}
.tag span {
    font-size: 18px;
    font-weight: 600;
}
.index_list  {
    margin-bottom: 40px;
}
.index_list li {
    display: inline-block;
    margin-right: 2em;
    margin-bottom: .8em;
}
.index_list li a {
    text-decoration: underline;
}
.index_list li a:hover {
    text-decoration: none;
}
.subtag {
    padding: 4px 16px;
    border: 2px solid #dca29c;
    border-radius: 22px;
    font-size: 14px;
    display: inline-block;
    color: #dca29c;
    margin-bottom: 6px;
}
.subtag.web {
    border: 2px solid #dca29c;
    color: #dca29c;
}
.subtag.doga {
    border: 2px solid #b45d67;
    color: #b45d67;
}
.subtag.ai {
    border: 2px solid #24a9a7;
    color: #24a9a7;
}
.subtag.market {
    border: 2px solid #04495e;
    color: #04495e;
}
.subtag.comm {
    border: 2px solid #c79d68;
    color: #c79d68;
}
.subtag.risk {
    border: 2px solid #e6c94e;
    color: #e6c94e;
}
.subtag.system {
    border: 2px solid #e78b2b;
    color: #e78b2b;
}
.subtag.shinsotsu {
    border: 2px solid #95c96f;
    color: #95c96f;
}
/* タイトル */
h1.training {
    color: #dca29c;
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: bold;
}
h1.training {
    color: #dca29c;
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: bold;
}
h1.training.web,
h1.training.web {
    color: #dca29c;
}
h1.training.doga,
h1.training.doga {
    color: #b45d67;
}
h1.training.ai,
h1.training.ai {
    color: #24a9a7;
}
h1.training.market,
h1.training.market {
    color: #04495e;
}
h1.training.comm,
h1.training.comm {
    color: #c79d68;
}
h1.training.risk,
h1.training.risk {
    color: #e6c94e;
}
h1.training.system,
h1.training.system {
    color: #e78b2b;
}
h1.training.shinsotsu,
h1.training.shinsotsu {
    color: #95c96f;
}

/* 説明 */
.lead {
    font-size: 18px;
    line-height: 1.4;
    padding-bottom: 10px;
}
.bar {
    width: 100%;
    height: 8px;
    background-color: #f1d9d7;
    margin-bottom: 40px;
}
.bar-fill {
    width: 15%;
    height: 100%;
    background-color: #dca29c;
}
.bar.web {
    background-color: #f1d9d7;
}
.bar-fill.web {
    background-color: #dca29c;
}
.bar.doga {
    background-color: #e1bec2;
}
.bar-fill.doga {
    background-color: #b45d67;
}
.bar.ai {
    background-color: #a7dcdb;
}
.bar-fill.ai {
    background-color: #24a9a7;
}
.bar.market {
    background-color: #9ab6be;
}
.bar-fill.market {
    background-color: #04495e;
}
.bar.comm {
    background-color: #f3e4d2;
}
.bar-fill.comm {
    background-color: #c79d68;
}
.bar.risk {
    background-color: #f5e9b8;
}
.bar-fill.risk {
    background-color: #e6c94e;
}
.bar.system {
    background-color: #f5d0aa;
}
.bar-fill.system {
    background-color: #e78b2b;
}
.bar.shinsotsu {
    background-color: #d4e9c5;
}
.bar-fill.shinsotsu {
    background-color: #95c96f;
}

/* 見出し */
h2.recommend {
    margin: 30px 0 20px;
}
.recommend {
    display: flex;
    align-items: center;
    gap: 12px; /* アイコンと文字の間 */
}
.recommend-icon {
    width: 34px; /* 画像サイズに合わせて調整 */
    height: auto;
}
.list_icon {
    color: #dca29c;
    font-size: .8em;
    padding-right: .5em;
}
.list_icon.web {
    color: #dca29c;
}
.list_icon.doga {
    color: #b45d67;
}
.list_icon.ai {
    color: #24a9a7;
}
.list_icon.market {
    color: #04495e;
}
.list_icon.comm {
    color: #c79d68;
}
.list_icon.risk {
    color: #e6c94e;
}
.list_icon.system {
    color: #e78b2b;
}
.list_icon.shinsotsu {
    color: #95c96f;
}

.recommend-text {
    font-size: 20px;
    font-weight: 700;
    color: #666; /* 画像のグレーに近い色 */
}

/* リスト */
ul.training_ist {
    margin-bottom: 30px;
}
ul.training_ist li {
    margin-bottom: .15em;
}
/* 2カラム（初期は1カラム） */
.two-column {
    display: block;
}
/* プログラム */
.step-card {
    display: flex;
    align-items: flex-start;
    padding: 0 0 20px;
    gap: 20px;
}
.step-number {
    width: 40px;
    height: 40px;
    border: 2px solid #e5a9a3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    color: #e5a9a3;
    background-color: #fff;
}
.step-number.web {
    border: 2px solid #dca29c;
    color: #dca29c;
}
.step-number.doga {
    border: 2px solid #b45d67;
    color: #b45d67;
}
.step-number.ai {
    border: 2px solid #24a9a7;
    color: #24a9a7;
}
.step-number.market {
    border: 2px solid #04495e;
    color: #04495e;
}
.step-number.comm {
    border: 2px solid #c79d68;
    color: #c79d68;
}
.step-number.risk {
    border: 2px solid #e6c94e;
    color: #e6c94e;
}
.step-number.system {
    border: 2px solid #e78b2b;
    color: #e78b2b;
}
.step-number.shinsotsu {
    border: 2px solid #95c96f;
    color: #95c96f;
}
.step-content {
    width: calc(100% - 60px);
}
.step-content h3 {
    margin: 0;
    font-size: 18px;
    color: #dca29c;
    font-weight: 700;
}
.step-content.web h3 {
    color: #dca29c;
}
.step-content.doga h3 {
    color: #b45d67;
}
.step-content.ai h3 {
    color: #24a9a7;
}
.step-content.market h3 {
    color: #04495e;
}
.step-content.comm h3 {
    color: #c79d68;
}
.step-content.risk h3 {
    color: #e6c94e;
}
.step-content.system h3 {
    color: #e78b2b;
}
.step-content.shinsotsu h3 {
    color: #95c96f;
}
.step-content p {
    margin: 6px 0 0;
    font-size: 14px;
}
.font-strong {
    font-size: 1.7em;
    font-weight: bold;
    color: #dca29c;
}
.font-strong.web {
    color: #dca29c;
}
.font-strong.doga {
    color: #b45d67;
}
.font-strong.ai {
    color: #24a9a7;
}
.font-strong.market {
    color: #04495e;
}
.font-strong.comm {
    color: #c79d68;
}
.font-strong.risk {
    color: #e6c94e;
}
.font-strong.system {
    color: #e78b2b;
}
.font-strong.shinsotsu {
    color: #95c96f;
}

/*---------------------------
　　　　　誘導
---------------------------*/
.training_contact_area {
    text-align: center;
    padding: 20px;
    border: 3px solid #131559;
    border-radius: 10px;
    width: 100%;
    max-width: 800px;
    margin: 40px auto 0;
}
.training_contact_area .contact_ttl {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #131559;
}
.training_contact_area .fv__btn {
    max-width: 300px;
    margin: 0 auto;
    
}
/* =====================
large
===================== */
@media (min-width: 600px) {
.containers {
    padding: 100px 20px;
}
h1.training {
    font-size: 38px;
    margin: 15px 0;
    }
.tag {
    padding: 14px 20px;
    border-radius: 6px;
    margin-bottom: 20px;
}
.tag-icon {
    width: 30px;
}
.tag span {
    font-size: 20px;
}
.subtag {
    font-size: 18px;
}
/* 説明 */
.lead {
    font-size: 26px;
    line-height: 1.4;
    }
.bar-fill {
    width: 6%; /* ピンク部分の割合（画像に合わせて調整） */
    }
/* 見出し */
h2.recommend {
    margin: 40px 0 20px;
    }
.two-column {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: space-between;
    }
/* リスト */
ul.training_ist li {
    font-size: 18px;
    }
.two-column > div {
    width: 48%;
    }
.step-number {
    width: 60px;
    height: 60px;
    font-size: 24px;
    }
.step-content h3 {
    font-size: 20px;
    }
.step-content p {
    font-size: 16px;
    }
.training_contact_area {
    padding: 40px 20px;
    margin: 60px auto 0;
    }
.training_contact_area .contact_ttl {
    font-size: 20px;
    margin-bottom: 20px;
    }
}