@charset "utf-8";


/*
*	Title: SCSK サービス詳細用
*	URI: 
*	Last Modified: 
*	Description: メインカラム（サービス詳細内容）
*/


/* トップページ  動画 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.video-youtube {
width:95%;
}

#moji_on_image {font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif!important;}

/*見出しタイトル（既存クラスの上書き）*/
.title_middle_srv01 {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif!important;
    font-size:130%!important;
}

#celf_campus .h-ttl03cc_q {
    position:relative;
    line-height:2em;
    text-indent:2em;
    font-size: 22px !important;
    font-weight: bold;
    background-image: url(../img/h-ttl03cc_q.png);
    background-position: 0 bottom;
    background-repeat: no-repeat;
    margin-bottom: 1em;
    padding-bottom: 0;
}

#celf_campus .h-ttl03cc_q:before {
    position:absolute;
    top: -0.2em;
    left: 0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(../img/index_hdr_quest.png) no-repeat;
    background-size:contain;
}

#celf_campus .h-ttl03cc_blk {
    position:relative;
    line-height:2em;
    text-indent:2em;
    font-size: 22px !important;
    font-weight: bold;
    background-image: url(../img/h-ttl03cc_blk.png);
    background-position: 0 bottom;
    background-repeat: no-repeat;
    margin-bottom: 1em;
    padding-bottom: 0;
}

#celf_campus .h-ttl03cc_blk:before {
    position:absolute;
    left: 0;
    content:"";
    display:inline-block;
    width:1.5em;
    height:1.5em;
    background:url(../img/index_hdr_block.png) no-repeat;
    background-size:contain;
}


#celf_campus h2.h-ttl_celf_campus{
    font-size:115%!important;
    color:#595959;
}

#celf_campus h3.h-ttl_green{
    font-size:20px!important;
    color: #fff;
    font-weight:bold;
    padding:10px 30px 5px 30px;
    background-color: #00a73c;
    text-decoration: none;
    border: 0px;
    border-radius: 10px;/*角丸*/
    margin-bottom: 1em;
}

#celf_campus p.txtwhybig_why{
    font-size:153%!important;
    text-align: left;
    display: block;
    color:#595959;
}

#celf_campus .why_under{
    border-bottom: 1px solid #7f7f7f;
}

#celf_campus .why_conclude{
    font-size:28px!important;
    color:#595959;
    text-align: center;
    font-weight:bold;
}

#celf_campus .txtred{
    color:#ff3300!important;
}

/****** application banner (green) resize ******/
#celf_campus .bb-txtwhitebig{
    font-size:24px; !important;
}

#celf_campus a.bb-ccgreen {
background-color: #00a73c !important;
border: 1px solid #00a73c !important;
}

#celf_campus a.bb-ccgreen:hover {
color: #00a73c !important;
background-color: #FFFFFF !important;
}

#celf_campus a.flex-btn-application:before {
    margin-right: 12px;
    margin-top: -3px;
}

#celf_campus .bb-ccgreen {
background-color: #00a73c !important;
border: 1px solid #00a73c !important;
box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 20%);
color: #FFF;
text-align: center;
padding:1em 1.8em;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
align-content: center;
flex-wrap: wrap;
}
#celf_campus .flex-btn-application:before {
    margin-right: 12px;
    margin-top: -3px;
    font-family: "Font Awesome 5 Free";
    font-weight: 400!important;
    content: "\f044";
}
/********************************************/

#celf_campus p.txtwhybig_point,
#celf_campus .txtwhybig_point{
    font-size:153%!important;
    text-align: left;
    color:#595959;
}

#celf_campus .boxLinks-celf li{
    /* float: left; */
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltgreen li {
    position:relative;
    height: 133px !important;
    border: 3px #00c446 solid;
    border-radius: 20px;/*角丸*/
    margin: 0 1em 8px 1em;
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltgreen li img.box-point-icnspace {
    position:absolute;
    top: 0;
    content:"";
    height: 133px !important;
    width: 200px !important;
    background-color: #00c446;
    text-align:center;
    border: 3px #00c446 solid;
    border-radius: 20px;/*角丸*/
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltgreen li img.box-point-img {
    position:absolute;
    top: -3px;
    left:-3px;
    /* height: 140px !important;
    width: 200px !important; */
    background-color: #00c446;
    text-align:center;
    margin: 0;
    border: 3px #00c446 solid;
    border-radius: 20px;/*角丸*/
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltgreen li p.box-point-ttl {
    position:absolute;
    top: 15px;
    left: 200px;
    color:#595959;
    font-size: 22px;
    font-weight: bold;
    text-align:left;
    padding: 0 20px 0 0;
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltgreen li p.box-point-text {
    position:absolute;
    top: 3em;
    left: 200px;
    color:#595959;
    font-size: 18px;
    padding: 0 20px 0 0;
    text-align: left;
}


#celf_campus .boxLinks-celf.boxLinks-celf-point-yellow li {
    position:relative;
    height: 133px !important;
    border: 3px #ffdb43 solid;
    border-radius: 20px;/*角丸*/
    margin: 0 1em 8px 1em;
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-yellow li img.box-point-icnspace {
    position:absolute;
    top: 0;
    content:"";
    height: 133px !important;
    width: 200px !important;
    background-color: #ffdb43;
    text-align:center;
    border: 30px #ffdb43 solid;
    border-radius: 20px;/*角丸*/
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-yellow li img.box-point-img {
    position:absolute;
    top: -3px;
    left:-3px;
    /* height: 140px !important;
    width: 200px !important; */
    background-color: #ffdb43;
    text-align:center;
    margin: 0;
    border: 3px #ffdb43 solid;
    border-radius: 20px;/*角丸*/
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-yellow li p.box-point-ttl {
    position:absolute;
    top: 15px;
    left: 200px;
    color:#595959;
    font-size: 22px;
    font-weight: bold;
    text-align:left;
    padding: 0 20px 0 0;
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-yellow li p.box-point-text {
    position:absolute;
    top: 3em;
    left: 200px;
    color:#595959;
    font-size: 18px;
    padding: 0 20px 0 0;
    text-align: left;
}
#celf_campus .boxLinks-celf.boxLinks-celf-point-ltblue li {
    position:relative;
    height: 133px !important;
    border: 3px #33cae1 solid;
    border-radius: 20px;/*角丸*/
    margin: 0 1em 8px 1em;
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltblue li img.box-point-icnspace {
    position:absolute;
    top: 0;
    content:"";
    height: 133px !important;
    width: 200px !important;
    background-color: #33cae1;
    text-align:center;
    border: 3px #33cae1 solid;
    border-radius: 20px;/*角丸*/
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltblue li img.box-point-img {
    position:absolute;
    top: -3px;
    left:-3px;
    /* height: 140px !important;
    width: 200px !important; */
    background-color: #33cae1;
    text-align:center;
    margin: 0;
    border: 3px #33cae1 solid;
    border-radius: 20px;/*角丸*/
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltblue li p.box-point-ttl {
    position:absolute;
    top: 15px;
    left: 200px;
    color:#595959;
    font-size: 22px;
    font-weight: bold;
    text-align:left;
    padding: 0 20px 0 0;
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltblue li p.box-point-text {
    position:absolute;
    top: 3em;
    left: 200px;
    color:#595959;
    font-size: 18px;
    padding: 0 20px 0 0;
    text-align: left;
}

#celf_campus .h-ttl10point {
    font-size: 22px;
    font-weight: bold;
    color:#00a73c;
    margin-bottom: 10px;
}

#celf_campus p.txt-point_app {
    margin-top: 1em;
    color:#595959;
    font-size: 18px;
    text-align: left;
}

#celf_campus p.txt-point_app_mTleft {
    margin-top: 1.17em !important;
}

#celf_campus p.txt-point_app_mTright {
    margin-top: 1em !important;
}

#celf_campus .font-gray {
    color:#595959 !important;
}


#celf_campus .text_center_roundhdr {
  /* padding:20px 20px; */
  text-align: center!important;
  display: block;
  border-radius:25px;
  background:#ff7d00;
  width:60%;
}

#celf_campus .text_center_roundhdr p.txtwhite, p.txtwhitebig{
margin-top:1em;
font-size:100%;
color:#ffffff;
/* border-radius:25px; */
display: inline-block!important;
text-align: right;
}

#celf_campus .text_center_roundhdr p.txtwhitebig{
font-size:160%;
font-weight:bold;
display: inline-block!important;
text-align: left;
margin-bottom: 0;
}


#celf_campus .h-ttl11dsorange:before {
content:"◆";
font-size:20px;
font-weight:bold;
color:#ff7d00;
margin-right: 0.5em;
vertical-align: 3%;
}

#celf_campus .h-ttl11dsorange{
font-size:20px;
font-weight:bold;
color:#ff7d00;
padding-left:1.5em;
text-indent:-1.5em;
}

#celf_campus .h-ttl11dsblack:before{
content:"◆";
font-size:20px;
font-weight:bold;
margin-right: 0.5em;
vertical-align: 3%;
}

#celf_campus .h-ttl11dsblack{
font-size:20px;
font-weight:bold;
}

#celf_campus .dstxt, #celf_campus .dslink{
margin-left:2em;
}

/* Table-BG-Color */
#celf_campus .dataTable-bg-LtGray {
background-color: #F1F1F1 !important;
}

#celf_campus .boxLinks-infa li{
    /* background-color: #707070;
    text-align:center; */
    float: left;
}

#celf_campus .boxLinks-infa.line-3-infa li {
    width: 314px;
    height: 540px;
    margin: 0 6px 0 6px;
    border: 1px solid #707070;
    position: relative;    
    margin-bottom: 20px;
}

#celf_campus .boxLinks-infa.line-3-infa-lf li {
    height: 505px !important;
}

#celf_campus .boxLinks-infa.line-3-infa li img.box-workbook-img {
    text-align:center;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px #c0c0c0 solid;
}

#celf_campus .boxLinks-infa.line-3-infa li p.box-workbook-ttl {
    background-color: #eeeeee;
    text-align:center;
    padding: 10px 0 ;
}

#celf_campus .boxLinks-infa.line-3-infa li p.box-workbook-text {
    padding: 5px 12px;
    text-align: left;
}

/* */
#celf_campus .column_celf {
    width: 652px;
    border: 1px #c0c0c0 solid;
}

#celf_campus .column_celf a {
    display: block;
}

#celf_campus p.t-frontgate {
    margin-bottom: 0;
}

#celf_campus .itskill_image {
    padding: 5px;
    width: 240px;
}

#celf_campus .frontgate_logo {
    background-color: #000000;
}


#celf_campus p.ttl-frontgate_column {
    font-weight: bold;
    margin: 0 5px 5px 10px;
    padding-left:10px;
}

#celf_campus  p.frontgate_column_text {
    margin: 5px 5px 5px 10px;
    padding-left:10px;
    padding-bottom: 0;
}
/* */

#celf_campus .frontgate_column_textbg {
    background-color: #f2f5f7;
}




#celf_campus a.column_link{
display:block;
}
#celf_campus .column_celf {
display:block;
width: 720px;
border: 1px #c0c0c0 solid;
padding:10px;
}
#celf_campus .ttl-frontgate_column{
margin:5px 0 0 0!important;
padding-left:0!important;
}
#celf_campus .itskill_image {
padding: 0!important;
width: auto!important;
}
#celf_campus .column_celf .frontgate_colmun_link_left,#celf_campus .column_celf .frontgate_colmun_link_right {
width:265px;
height:140px;
}
#celf_campus .column_celf .frontgate_colmun_link_right {
width:420px;
height:140px;
padding:0
}
#celf_campus .column_celf .frontgate_logo {
width:250px;
margin-bottom:10px;
}
#celf_campus .celf_campus-box_title{
position:relative;
}
#celf_campus .celf_campus-box_title p{
color:#FFF;
font-size:24px;
font-weight:bold;
position:absolute;
top:60%;
left:20px;
transform:translateY(-60%);
width:60%;
}
#celf_campus .celf_campus-box01{
border:1px solid #ef9e31;
background:#f5ecdf;
text-align:left;
margin-bottom:2em;
}
#celf_campus .celf_campus-box01 p{
font-size:18px;
padding:20px;
margin-bottom:0;
}
#celf_campus .celf_campus-box02{
border:1px solid #49a5e7;
background:#e4f1fa;
text-align:left;
margin-bottom:2em;
}
#celf_campus .celf_campus-box02 p{
font-size:18px;
padding:20px;
margin-bottom:0;
}




@media screen and (max-width:767px) and (min-width:1px) {
#celf_campus .column_celf {
display:block;
width:100%;
}
#celf_campus .column_celf .frontgate_colmun_link_left,#celf_campus .column_celf .frontgate_colmun_link_right {
width:100%;
height:auto;
}
}




@media screen and (max-width:767px) and (min-width:1px) {
#celf_campus p.txtwhybig_why, #celf_campus p.txtwhybig_point, #celf_campus .txtwhybig_point{
    font-size:130%!important;
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltgreen li {
    position:relative;
    height: 173px !important;
    border: 3px #00c446 solid;
    border-radius: 20px;/*角丸*/
    margin: 0 0 5px 0;
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltgreen li img.box-point-icnspace {
    position:absolute;
    top: 0;
    content:"";
    height: 133px !important;
    /* width: 800px !important; */
    background-color: #00c446;
    text-align:center;
    border: 3px #00c446 solid;
    border-radius: 20px;/*角丸*/
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltgreen li img.box-point-img {
    position:absolute;
    top: -3px;
    left:-3px;
    /* height: 140px !important;
    width: 200px !important; */
    background-color: #00c446;
    text-align:center;
    margin: 0;
    border: 3px #00c446 solid;
    border-radius: 20px;/*角丸*/
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltgreen li p.box-point-ttl {
    position:absolute;
    top: 5px;
    left: 95px;
    color:#595959;
    font-size: 18px;
    font-weight: bold;
    text-align:left;
    padding: 0;
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltgreen li p.box-point-text {
    position:absolute;
    top: 2em;
    left: 95px;
    color:#595959;
    font-size: 16px;
    padding: 0;
    text-align: left;
}


#celf_campus .boxLinks-celf.boxLinks-celf-point-yellow li {
    position:relative;
    height: 143px !important;
    border: 3px #ffdb43 solid;
    border-radius: 20px;/*角丸*/
    margin: 0 0 5px 0;
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-yellow li img.box-point-icnspace {
    position:absolute;
    top: 0;
    content:"";
    height: 133px !important;
    /* width: 800px !important; */
    background-color: #ffdb43;
    text-align:center;
    border: 30px #ffdb43 solid;
    border-radius: 20px;/*角丸*/
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-yellow li img.box-point-img {
    position:absolute;
    top: -3px;
    left:-3px;
    /* height: 140px !important;
    width: 200px !important; */
    background-color: #ffdb43;
    text-align:center;
    margin: 0;
    border: 3px #ffdb43 solid;
    border-radius: 20px;/*角丸*/
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-yellow li p.box-point-ttl {
    position:absolute;
    top: 5px;
    left: 95px;
    color:#595959;
    font-size: 18px;
    font-weight: bold;
    text-align:left;
    padding: 0;
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-yellow li p.box-point-text {
    position:absolute;
    top: 2em;
    left: 95px;
    color:#595959;
    font-size: 16px;
    padding: 0;
    text-align: left;
}
#celf_campus .boxLinks-celf.boxLinks-celf-point-ltblue li {
    position:relative;
    height: 193px !important;
    border: 3px #33cae1 solid;
    border-radius: 20px;/*角丸*/
    margin: 0 0 5px 0;
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltblue li img.box-point-icnspace {
    position:absolute;
    top: 0;
    content:"";
    height: 133px !important;
    /* width: 800px !important; */
    background-color: #33cae1;
    text-align:center;
    border: 3px #33cae1 solid;
    border-radius: 20px;/*角丸*/
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltblue li img.box-point-img {
    position:absolute;
    top: -3px;
    left:-3px;
    /* height: 140px !important;
    width: 200px !important; */
    background-color: #33cae1;
    text-align:center;
    margin: 0;
    border: 3px #33cae1 solid;
    border-radius: 20px;/*角丸*/
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltblue li p.box-point-ttl {
    position:absolute;
    top: 5px;
    left: 95px;
    color:#595959;
    font-size: 18px;
    font-weight: bold;
    text-align:left;
    padding: 0;
}

#celf_campus .boxLinks-celf.boxLinks-celf-point-ltblue li p.box-point-text {
    position:absolute;
    top: 2em;
    left: 95px;
    color:#595959;
    font-size: 16px;
    padding: 0;
    text-align: left;
}






#celf_campus .text_center_roundhdr {
  width:100%;
}
#celf_campus .text_center_roundhdr p.txtwhite, p.txtwhitebig{
margin-right:1em;
margin-left:1em;
}

#celf_campus .boxLinks-infa.line-3-infa li {
width: 100%;
margin-left:0; 
margin-right:0; 
} 

#celf_campus .column_celf {
display:block;
width:100%;
}
#celf_campus .column_celf .frontgate_colmun_link_left,#celf_campus .column_celf .frontgate_colmun_link_right {
width:100%;
height:auto;
}
#celf_campus .sp-column-reverse{
flex-direction:column-reverse;
}
#celf_campus .celf_campus-box_title p{
text-align:left;
line-height: 1;
top: 70%;
transform: translateY(-70%);
}
}