@charset "utf-8";

/* CSS Document */

article * {
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
}
#main_cont img {
    max-width: 100%;
}
#main_cont li {
    color: #333;
    line-height: 2;
}
td,th {
    color: #333;
}
ol li {
    list-style: none;
}
ol li::before {
    content:none;
}
.br_sp {display: none}
.br_pc {display: inline}
span.sup {vertical-align: super; font-size: 70%;}

.outline {padding-top: 200px; margin-top: -200px;}
.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#main_cont .flex {
    margin: auto;
}
#main_cont h4 {
    margin-bottom: 76px;
}
#main_cont h5 {
    color: #333;
    position: static;
    border-left: none;
    display: block;
    padding-left: 0;
    margin-bottom: 20px;
    line-height: 1.6;
    height: auto;
}
#main_cont h5::after {
    content: none;
}
#main_cont.seminarCont {
    max-width: 100%;
}
.career {
    margin: 40px auto 0;
    max-width: 1400px;
}
.br1400 {
    display: block;
}
.pc-only {
    display: block;
}
.sp-only {
    display: none;
}

@media screen and (max-width:660px) {
    .br_sp {display: inline}
    .br_pc {display: none}
    .pc-only {
        display: none;
    }
    .sp-only {
        display: block;
    }
    #main_cont.seminarCont {
        margin-top: 40px;
    }
    #main_cont .flex,.flex {
        display: block;
    }
    #main_cont p {
        font-size: 14px;
        margin-bottom: 0;
    }
    #main_cont h4 {
        margin-bottom: 56px;
    }
    #main_cont h5 {
        margin-bottom: 14px;
    }
}


/*------------------------------------------
タイトル
------------------------------------------*/
.seminarTitle {
    background: #499CE3;
    text-align: center;
}
.seminarTitle__text {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 0;
}
.seminarTitle__text h3 {
    font-size: 40px;
    color: #fff;
    border-bottom: 6px solid #FFB4D4;
    display: inline-block;
}
.seminarTitle__text p {
    color: #fff;
    font-size: 20px;
    margin-top: 10px;
}
@media screen and (max-width:660px) {
    .seminarTitle__text {
        width: 100%;
    }
    .seminarTitle__text h3 {
        font-size: 30px;
        line-height: 1.6;
    }
}
/*------------------------------------------
チャート
------------------------------------------*/
.careerBox {
    display: grid;
    grid-template-columns: 36% 62%;
    column-gap: 26px;;
    row-gap: 30px;
    justify-content: space-between;
}
/*　吹き出し　*/
.careerBalloon {
    text-align: center;
}
#main_cont .careerBalloon p {
    position: relative;
    display: inline-block;
    padding: 4px 20px;
    max-width: 326px;
    width: 100%;
    font-size: 22px;
    background: #2C86EF;
    color: #fff;
    border-radius: 50px;
}
.careerBalloon p::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #2C86EF;
}
/* ボックス共通　*/
.careerBox__item {
    border-radius: 12px;
    padding: 10px 14px;
    text-align: center;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
}
#main_cont .careerBox__item h5 {
    font-size: 24px;
    margin-bottom: 16px;
    background: linear-gradient(transparent 90%, #FDB4D4 0%);
    display: inline;
}
#main_cont .spetialTtl {
    color: #0050ad;
}
#main_cont .careerBox__item p, #main_cont .careerBox__item li {
    text-align: left;
    font-size: 18px;
    line-height: 1.4;
    font-weight: bold;
}
#main_cont .careerBox__item .smallText {
    font-size: 14px;
    text-align: center;
    margin-top: 6px;
}
#main_cont .careerBox__item h5 span {
    font-size: 16px;
    background: none;
    display: block;
}
#main_cont .careerBox__item ul {
    list-style-type: square;
    padding-left: 1.5em;
}
/*　ボタン　*/
.carreBox__btn {
    margin: 10px auto 0;
}
#main_cont .carreBox__btn a,.leftMenu__list-btn {
    font-size: 24px;
    color: #333;
    text-align: left;
    display: inline-block;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    position: relative;
    padding: 10px 20px 10px 16px;
    border-radius: 6px;
    width: 100%;
    font-weight: bold;
    line-height: 1.2;
    transition: all 0.3s;
}
#main_cont .carreBox__btn a::after,.leftMenu__list-btn::after {
    content: "";
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 2px #333;
    border-right: solid 2px #333;
    -ms-transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    position: absolute;
    display: inline-block;
    top: 50%;
    right: 12px;
}
.careerBox__basic .carreBox__btn a, a[href="#basic"], #check03 + label {
    background: #FFF2CC;
    border-bottom: 6px solid #D1C5A2;
}
.careerBox__knowledge .carreBox__btn a,a[href="#knowledge"], #check02 + label  {
    background: #D8D8D8;
    border-bottom: 6px solid #A0A0A0;
}
.careerBox__webSeminar .carreBox__btn a,.careerBox__calculation .carreBox__btn a,a[href="#webSeminar"], #check06 + label  {
    background: #B4C5E7;
    border-bottom: 6px solid #7F8EAA;
}
.careerBox__designSkill .carreBox__btn a,a[href="#designSkill"], #check04 + label  {
    background: #F6CAAC;
    border-bottom: 6px solid #C6B4A9;
}
.careerBox__processingSkill .carreBox__btn a,a[href="#processingSkill"], #check05 + label  {
    background: #C4E2B2;
    border-bottom: 6px solid #ABBF9F;
}
.careerBox__qualification .carreBox__btn a,a[href="#qualification"], #check01 + label  {
    background: #E6BEBA;
    border-bottom: 6px solid #A79492;
}
.careerBox__qualification {
    grid-column: 1 / 4;
    text-align: center;
}
.careerBox__qualification .carreBox__btn {
    max-width: 326px;
}

/*　左　*/
.careerBox__left .careerBox__item {
    background: #E2EFFF;
}
.careerBox__item.careerBox__webSeminar {
    background: #F5F5F5;
}
.webSeminar__ttl {
    display: flex;
    justify-content: center;
    gap:10px;
}
#main_cont .webSeminar__ttl-left p {
    background: #a8eafc;
    text-align: center;
    padding: 6px 10px;
    margin-top: 5px;
}
#main_cont .careerBox__item .webSeminar__ttl-right h5 {
    background: none;
    text-align: left;
    display: block;
    line-height: 1.4;
}
.careerBox__basic {
    margin-bottom: 30px;
}
.careerBox__knowledge {
    margin-bottom: 14px;
}
.careerBox__right {
    display: grid;
    align-content: space-between;
}
#main_cont .careerBox__item .webSeminar__txt {
    font-size: 16px;
}
.webSeminar__attention {
    text-align: center;
}
#main_cont .webSeminar__attention p {
    position: relative;
  display: inline-block;
  padding: 0 30px;
    color: #2C86EF;
    margin-top: 6px;
}
.webSeminar__attention p::before,.webSeminar__attention p::after {
    content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 28px;
    height: 3px;
  background-color: #2C86EF;
  -webkit-transform: rotate(-70deg);
  transform: rotate(-70deg);
}
.webSeminar__attention p::before {
    left: 0;
    -webkit-transform: rotate(70deg);
  transform: rotate(70deg);
}
.webSeminar__attention p::after {
    right: 0;
}
/*　右　*/
.careerBox__right-box {
    background: #ABC4E2;
    padding: 12px;
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    gap: 8px;
    border-radius: 12px;
}
.careerBox__right-box .careerBox__item {
    background: #fff;
}
.careerBox__inspector,.careerBox__taikaBulding{
    display: flex;
    align-items: center;
}
.careerBox__right-box01 {
    margin-bottom: 14px;
}

/*　矢印　*/
.arrow::after,.arrow::before {
    position: absolute;
    content: "";
    transform: translate(-50%,-50%);
}
.arrow::before {
    background: #3F96FC;
}
.arrow::after {
    width: 0;
    height: 0;
    border-style: solid;
}
.careerBox__basic,.careerBox__right-box01,.careerBox__right-box02 {
    position: relative;
}
.careerBox__basic {
    z-index: 5;
}
.careerBox__basic .arrow__side::before{
    width: 10%;
    height: 12px;
    top: 50%;
    right: -12%;
}
.careerBox__basic .arrow__side::after{
    border-width: 21px 0 21px 28px;
    border-color: transparent transparent transparent #3F96FC;
    top: 50%;
    right: -60px;
}
.careerBox__right-box01 .arrow__side02::before{
    width: 4%;
    height: 12px;
    top: 86%;
    left: -1%;
}
.careerBox__right-box01 .arrow__side02::after{
    border-width: 21px 28px 21px 0;
    border-color: transparent #3F96FC transparent transparent;
    top: 86%;
    left: -4%;
}
.careerBox__basic .arrow__vertical::before {
    width: 12px;
    height: 30px;
    left: 50%;
    bottom: -42px;
}
.careerBox__basic .arrow__vertical::after {
    border-width: 28px 21px 0 21px;
    border-color: #3F96FC transparent transparent transparent;
    bottom: -57px;
    left: 50%;
}
.right-box02--arrow {
    position: absolute;
    left: -48px;
    top: -10%;
}
.careerBox__right-box02 .arrow__side03 {
    display: none;
}
@media (hover: hover) {
    .carreBox__btn a:hover,.leftMenu__list-btn:hover {
        border-bottom-width:0px;
        margin-top: 6px;
    }
}
@media screen and (max-width:1400px){
    .right-box02--arrow {
        display: none;
    }
    .careerBox__right-box02 .arrow__side03 {
        display: block;
    }
    .careerBox__right-box02 .arrow__side03::before{
        width: 4%;
        height: 12px;
        top: 11%;
        left: -1%;
    }
    .careerBox__right-box02 .arrow__side03::after{
        border-width: 21px 28px 21px 0;
        border-color: transparent #3F96FC transparent transparent;
        top: 11%;
        left: -4%;
    }
}

@media screen and (max-width:880px){
    .br1400 {
        display: none;
    }
    #main_cont .careerBox__item h5 {
        font-size: 18px;
    }
    #main_cont .careerBox__item p,#main_cont .careerBox__item li {
        font-size: 14px;
    }
    #main_cont .careerBox__item .smallText{
        font-size: 11px;
    }
    #main_cont .carreBox__btn a {
        font-size: 16px;
    }
    .careerBox__right-box {
        grid-template-columns: 1fr;
    }
    .careerBox__qualification {
        grid-column: 1;
    }
    .careerBox__inspector, .careerBox__taikaBulding {
        display: block;
        text-align: center;
    }
    .careerBox__basic .arrow__side::before {
        width: 12%;
        right: -14%;
    }
    .webSeminar__ttl {
        display: block;
    }
    .careerBox__right-box01 .arrow__side02::before{
        top: 46%;
    }
    .careerBox__right-box01 .arrow__side02::after{
        top: 46%;
    }
    .right-box02--arrow{
        display: block;
        top: -40%;
    }
    .careerBox__right-box02 .arrow__side03::after{
        display: none;
    }
    .careerBox__right-box02 .arrow__side03::before{
        display: none;
    }
}
@media screen and (max-width:660px) {
    .careerBox {
        display: flex;
        flex-direction: column;
        row-gap: 0px;
    }
    .careerBox__item {
        padding: 10px 10px;
    }
    .careerBox__left .careerBox__item {
        margin-bottom: 30px;
    }
    .careerBox__knowledge {
        width: 90%;
    }
    .careerBox__item.careerBox__webSeminar {
        margin-top: 30px;
    }
    .careerBox__right-box01 {
        width: 90%;
        margin: 0 0 10px auto;
    }
    .careerBox__item .arrow::before,.careerBox__right-box .arrow::before {
        width: 12px;
    }
    .careerBox__basic .arrow::after {
        border-width: 28px 21px 0 21px;
        border-color: #3F96FC transparent transparent transparent;
    }
    .careerBox__basic .arrow__vertical::after {
        bottom: -52px;
    }
    .careerBox__basic .arrow__side::before {
        height: 220px;
        right: 6px;
        bottom: -325px;
        top: auto;
    }
    .careerBox__basic .arrow__side::after {
        right: -24px;
        bottom: -250px;
        top: auto;
    }
    .careerBox__right-box01 .arrow__side02::before {
        height: 32px;
        top: -10px;
        left: 50%;
    }
    .careerBox__right-box01 .arrow__side02::after,.careerBox__right-box02 .arrow__side03::after {
        border-width: 0 21px 28px 21px;
        border-color: transparent transparent #3F96FC transparent;
    }
    .careerBox__right-box01 .arrow__side02::after {
        top: -22px;
        left: 50%;
    }
    .careerBox__right-box02 .arrow__side03::before {
        height: 532px;
        top: -251px;
        left: 20px;
    }
    .careerBox__right-box02 .arrow__side03::after {
        top: -530px;
        left: 20px;
    }
    #main_cont .careerBox__item .typ,#main_cont .typ {
        text-align: center;
    }
    #main_cont .typ p {
        color: #fff;
        background: #2C86EF;
        display: inline-block;
        padding: 2px 10px;
        border-radius: 50px;
    }
    .right-box02--arrow{
        display: none;
    }
}