@charset "utf-8";
/* CSS Document */

.clearfix:after{content:"";}

/*----------------------------------------------------------------------------
 ***                                                                Container
----------------------------------------------------------------------------*/
body {}
#wrap {}

/*----------------------------------------------------------------------------
 ***                                                              contentsArea
----------------------------------------------------------------------------*/
#contentsArea {}
#contentsAreaInner {}
h2 {}

.txt{font-size: 100%;line-height: 1.5;}

.titleBox{width: 100%; margin-bottom: 1em; text-align: center;}
.titleBox .secTtl{line-height: 1;}
.titleBox .secTtl .mainSecTtl{color: #005872; font-size: 240%; font-weight: bold; text-align: center; display: block;}
.titleBox .secTtl .subSecTtl{color: #333; font-size: 95%; text-align: center; font-weight: normal; display: block; margin-bottom: 1em;}

/*----------------------------------------------------------------------------
***                                                             firstviewSec
----------------------------------------------------------------------------*/
#firstviewSec #sliderNavi {
  width: 100%; /* ウィンドウの横幅いっぱい */
  margin: 10px auto 0 auto;
  overflow: hidden;
}

#firstviewSec #sliderNavi .slick-slide {
  width: calc(1200px + 10px); /* 中央スライドの横幅を余白込みで計算 */
  height: 560px; /* 高さは650pxに固定 */
  padding-left: 5px;
  padding-right: 5px;
}

#firstviewSec #sliderNavi .slbox .sliderTtl img {
  width: 1200px; /* 画像自体の幅は1200pxに固定 */
  height: 100%;
  object-fit: cover; /* スライド内で画像が適切に表示されるように調整 */
}
#firstviewSec #sliderNavi .slbox .sliderTtl{width: 100%;}
#firstviewSec #sliderNavi .slbox a{ transition: opacity ease .5s;}
#firstviewSec #sliderNavi .slbox a:hover{opacity: .7;}


#firstviewSec #sliderNavi .slick-list .slick-slide:not(.slick-current){opacity: .5;}
#firstviewSec #sliderNavi #slbox00 .sliderDetailBox{position: relative;}
#firstviewSec #sliderNavi #slbox00 .sliderDetailBox .slbox00BtnUl{position: absolute;bottom:5.5em; left: 50%; transform: translateX(-50%); width: 1100px;}
#firstviewSec #sliderNavi #slbox00 .sliderDetailBox .slbox00BtnLi{padding: 3px;}
#firstviewSec #sliderNavi #slbox00 .sliderDetailBox .slbox00BtnLi.company{background-color: #096b85;}
#firstviewSec #sliderNavi #slbox00 .sliderDetailBox .slbox00BtnLi.school{background-color: #ca6638;}
#firstviewSec #sliderNavi #slbox00 .sliderDetailBox .slbox00BtnLi.tsuhon{background-color: #266b9a;}
#firstviewSec #sliderNavi #slbox00 .sliderDetailBox .slbox00BtnLi.company .slbox00Btn:first-child{display: none;}
#firstviewSec #sliderNavi #slbox00 .sliderDetailBox .slbox00BtnLi .slbox00Btn{display: flex; justify-content: flex-start; align-items: center; width: 210px; border:1px solid #fff; padding: 1em 0.6em; color:#fff; font-size: 120%; position: relative;}
#firstviewSec #sliderNavi #slbox00 .sliderDetailBox .slbox00BtnLi .slbox00Btn:hover{text-decoration:none;}
#firstviewSec #sliderNavi #slbox00 .sliderDetailBox .slbox00BtnLi .slbox00Btn:after{content: "";display: block;height: 0; width: 0; position: absolute;bottom: 8px; right: 8px;border-left: 15px solid transparent;border-bottom: 15px solid #fff8;}

#firstviewSec #sliderNavi #slbox00 .sliderDetailBox .slbox00BtnLi .icon{margin-right: 0.5em;}


#firstviewSec #firstviewSecInner{position: relative;}
#firstviewSec .rightSliderNavBox{position: absolute; width: 230px; background-color: #f8f8f8; border: 1px solid #005872; padding: 1.25em; top:50%; left:50%; transform: translate(300px,-50%);box-shadow: 10px 10px 15px -6px #00000080;}
#firstviewSec .rightSliderNavBox .rightSliderNavLi{margin-bottom: 1em;}
#firstviewSec .rightSliderNavBox .rightSliderNavLi.tsuhon{margin-bottom: 0;}

#firstviewSec .rightSliderNavBox .rightSliderNavDt {font-size: 120%; margin-bottom: 0.25em;}
#firstviewSec .rightSliderNavBox .company .rightSliderNavDt {color:#096b85;}
#firstviewSec .rightSliderNavBox .school .rightSliderNavDt {color:#ca6638;}
#firstviewSec .rightSliderNavBox .tsuhon .rightSliderNavDt {color:#266b9a;}

#firstviewSec .rightSliderNavBox .rightSliderNavBtn{display: block; padding: 0.5em 0.75em; width: 100%; position: relative; box-sizing: border-box;font-size: 100%; transition:background-color .5s ease;}
#firstviewSec .rightSliderNavBox .rightSliderNavBtn:not(:last-child){border-bottom:none;}
#firstviewSec .rightSliderNavBox .company .rightSliderNavBtn {background-color:#096B87; color:#fff; border: 1px solid #3a90a5;}
#firstviewSec .rightSliderNavBox .school .rightSliderNavBtn {background-color:#CC6638; color:#fff; border: 1px solid #ff8e5a;}
#firstviewSec .rightSliderNavBox .tsuhon .rightSliderNavBtn {background-color:#266B9C; color:#fff; border: 1px solid #4199c1;}
#firstviewSec .rightSliderNavBox .rightSliderNavBtn:hover{text-decoration: none;}
#firstviewSec .rightSliderNavBox .company .rightSliderNavBtn:hover{background-color:#067a9b;}
#firstviewSec .rightSliderNavBox .school .rightSliderNavBtn:hover{background-color:#df662f;}
#firstviewSec .rightSliderNavBox .tsuhon .rightSliderNavBtn:hover{background-color:#2d7fba;}
#firstviewSec .rightSliderNavBox .rightSliderNavDd{}

#firstviewSec .rightSliderNavBox .rightSliderNavBtn:after{content: "";display: block; width: 0; height: 0; border-style: solid;    position: absolute;top: 50%; right: 1.5em;transform: translate(0, -50%);border-width: 6px 0 6px 8px;}
#firstviewSec .rightSliderNavBox .company .rightSliderNavBtn:after{border-color: transparent transparent transparent #3a90a5;}
#firstviewSec .rightSliderNavBox .school .rightSliderNavBtn:after{border-color: transparent transparent transparent #ff8e5a;}
#firstviewSec .rightSliderNavBox .tsuhon .rightSliderNavBtn:after{border-color: transparent transparent transparent #4199c1;}

#firstviewSec .slick-slide img.pcNone{display: none;}
#firstviewSec .slick-dots{bottom:0.6em;}
#firstviewSec .slick-dots li button:before{font-size: 12px;}
/*----------------------------------------------------------------------------
***                                                                 introSec
----------------------------------------------------------------------------*/
#introSec{}
#introSecInner{padding-top: 1.5em;}
#introSec .reasonUl{margin-top: 3em; width: 100%;}
#introSec .reasonLi{width: 32%;}
#introSec .reasonDl{}
#introSec .reasonDt{background:#09798B; color:#fff; text-align: center; padding: 1em 1em 1.5em 1em; position: relative;}
#introSec .reasonDt:after{content: ""; display: block; width: 0; height: 0; border-style: solid; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%);border-color: #09798B transparent transparent transparent; border-width: 18px 16px 0px 16px;}
#introSec .reasonDt .subTtl{font-weight: normal; display: block; margin-bottom: 0.3em;}
#introSec .reasonDt .ttl{font-size: 180%; display: block;}
#introSec .reasonDd{padding: 1em;}
#introSec .reasonDd .reasonImg{margin: 1.5em auto;}
#introSec .reasonDd .reasonTxt{margin: 0; font-size: 115%;}

#introSec #pointBox .pointUl{margin-top: 2em; font-size: 70%;}
#introSec #pointBox .pointLi{padding: 0 1em; position: relative; width: 30%; max-width: 180px; min-height: 98px; margin: 0 2em;}
#introSec #pointBox .pointLi:before,
#introSec #pointBox .pointLi:after{content:""; display: block; width: 42px; height: 98px;position: absolute; top:50%; transform: translateY(-50%);background-size: cover; background-repeat: no-repeat; background-position: center center; }
#introSec #pointBox .pointLi:before{ background-image: url(/biz/images/top2410/point_contents01_gold.png);left: 0;}
#introSec #pointBox .pointLi:after{ background-image: url(/biz/images/top2410/point_contents02_gold.png);right: 0;}
#introSec #pointBox .pointDl{}
#introSec #pointBox .pointDt{color: #CB2920; font-size: 130%; text-align: center; margin-bottom: 0.8em;}
#introSec #pointBox .pointDd{font-weight: bold; text-align: center;}
#introSec #pointBox .pointDd .pointTxt{color: #CB2920; text-align: center; font-size: 120%;}
#introSec #pointBox .pointDd .highlight{font-size: 300%;}
#introSec #pointBox .pointDd .komeTxt{font-size: 90%; color: #333; font-weight: normal; text-align: center;}


/*----------------------------------------------------------------------------
***                                                                 pointSec
----------------------------------------------------------------------------*/
#pointSec{background-color: #E2D397;}
#pointSecInner{padding: 4em 1em;}
#pointSec .titleBox .secTtl .mainSecTtl{font-size: 200%;}
#pointSec .pointUl{margin-top: 2em;}
#pointSec .pointLi{padding: 0 1em; position: relative; width: 30%; max-width: 260px; min-height: 140px; margin: 0 2em;}
#pointSec .pointLi:before,
#pointSec .pointLi:after{content:""; display: block; width: 60px; height: 140px;position: absolute; top:50%; transform: translateY(-50%);background-size: cover; background-repeat: no-repeat; background-position: center center; }
#pointSec .pointLi:before{ background-image: url(/biz/images/top2410/point_contents01.png);left: 0;}
#pointSec .pointLi:after{ background-image: url(/biz/images/top2410/point_contents02.png);right: 0;}
#pointSec .pointDl{}
#pointSec .pointDt{color: #CB2920; font-size: 130%; text-align: center; margin-bottom: 1em;}
#pointSec .pointDd{font-weight: bold; text-align: center;}
#pointSec .pointDd .pointTxt{color: #CB2920; text-align: center; font-size: 120%;}
#pointSec .pointDd .highlight{font-size: 300%;}
#pointSec .pointDd .komeTxt{font-size: 90%; color: #333; font-weight: normal; text-align: center;}


/*----------------------------------------------------------------------------
***                                                               supportSec
----------------------------------------------------------------------------*/
#supportSec{background-color: #F3F3F3;}
#supportSec .supportUl{margin: 2em auto 0; width: calc(100% - 6em);}
#supportSec .supportLi{background-color: #fff; margin-bottom: 4em; box-shadow: 10px 10px 15px -6px #00000033;}
#supportSec .supportLi:last-child{margin-bottom: 0;}
#supportSec .supportTtlBox{background-color: #005872; padding: 1.2em 1.5em 1em;}
#supportSec .supportTtlBox .supportTtl{color: #fff; font-weight: bold; font-size: 210%; margin: 0; line-height: 1;}
#supportSec .supportTtlBox .supportBtn{margin: 0;}
#supportSec .supportTtlBox .supportBtn a{display: block;background-color: #DDE6E8;border-radius: 2em;color: #005872;font-weight: bold;font-size: 120%;text-align: center;line-height: 1;margin: 0;position: relative;width: 7em;padding: 0.7em 1.5em 0.6em 1em;}
#supportSec .supportTtlBox .supportBtn a:after{content: ""; display: block; width: 0; height: 0; border-style: solid; position: absolute; top: 50%; right: 1em; transform: translate(0, -50%);border-color: transparent transparent transparent #005872; border-width: 6px 0 6px 8px;}
#supportSec .supportTtlBox .supportBtn a:hover{text-decoration: none;}

#supportSec .supportDetailBox .leftBox{padding: 1.5em 0 1.5em 1.5em; width:calc(100% - 400px);}
#supportSec .supportDetailBox .leftBox .supportDetailLi{margin-bottom: 1em;}
#supportSec .supportDetailBox .leftBox .supportDetailLi:last-child{margin-bottom: 0;}
#supportSec .supportDetailBox .leftBox .supportDt{width: 10em; background-color: #CDE1E6; padding: 1em 0.7em; margin-right: 1em;position: relative;font-size: 130%;}
#supportSec .supportDetailBox .leftBox .supportDt:after{content: ""; display: block; width: 0; height: 0; border-style: solid; position: absolute; top: 50%; right: 0; transform: translate(100%, -50%);border-color: transparent transparent transparent #CDE1E6; border-width: 8px 0 8px 9px;}
#supportSec .supportDetailBox .leftBox .supportDd{padding: 0.5em 0.5em 0.5em 0;}
#supportSec .supportDetailBox .leftBox .supportDd .ttl{font-size: 130%; color:#D11477; font-weight: bold; margin: 0;}
#supportSec .supportDetailBox .leftBox .supportDd .txt{font-size: 100%; margin: 0; line-height: 1.5;}

#supportSec .supportDetailBox .rightBox{width: 400px; height: 100%;}
#supportSec .supportDetailBox .rightImg{width: 100%; height: 100%; margin: 0;}
#supportSec .supportDetailBox .rightBox img{object-fit: cover; object-position: center bottom; width: 400px; height: 100%;}


/*----------------------------------------------------------------------------
***                                                                onlineSec
----------------------------------------------------------------------------*/
#onlineSec{background-image: url(/biz/images/top2410/online_bgi01.png); background-repeat: no-repeat; background-position: 95% 100%;}
#onlineSec .onlineUl{margin-top: 3em; width: 100%;}
#onlineSec .onlineLi{width: 32%; background-color:#fff; box-shadow: 10px 10px 15px -6px #00000033;}
#onlineSec .onlineDl{}
#onlineSec .onlineDt{color:#fff; text-align: center; padding: 1.5em 1em;}
#onlineSec .company .onlineDt{background:#16617A;}
#onlineSec .school .onlineDt{background:#AB2D07;}
#onlineSec .tsuhon .onlineDt{background:#1B6B9A;}
#onlineSec .onlineDt .subTtl{font-weight: normal; display: block; margin-bottom: 0.3em;}
#onlineSec .onlineDt .ttl{font-size: 170%; display: block;}
#onlineSec .onlineDd{padding: 1em;}
#onlineSec .onlineDd .onlineImg{margin: 0.3em auto 1.5em auto;}
#onlineSec .onlineDd .onlineCheckLi{font-size: 130%; font-weight: bold; padding-left: 1.5em; position: relative;}
#onlineSec .onlineDd .onlineCheckLi:before{content:""; display: block; width: 20px; height: 16px; position: absolute; top:0.5em; left: 0; transform: translateY(-50%); background-image: url(/biz/images/top2410/online_check01.png); background-size: cover; background-repeat: no-repeat; background-position: center center;}
#onlineSec .company .onlineDd .onlineCheckLi:last-child,#onlineSec .tsuhon .onlineDd .onlineCheckLi:last-child{margin-bottom: 1.6em;}

#onlineSec .onlineDd.moreBtn{padding: 0;}
#onlineSec .onlineDd.moreBtn a{display: block; width: 100%; padding: 0.5em; text-align: center; color:#fff; box-sizing: border-box; transition: background ease .7s;}
#onlineSec .company .onlineDd.moreBtn a{background: #33738E;}
#onlineSec .school .onlineDd.moreBtn a{background: #C84714;}
#onlineSec .tsuhon .onlineDd.moreBtn a{background: #005D85;}
#onlineSec .onlineDd.moreBtn a:hover{text-decoration: none;}
#onlineSec .company .onlineDd.moreBtn a:hover{background:#16617A;}
#onlineSec .school .onlineDd.moreBtn a:hover{background:#E56036;}
#onlineSec .tsuhon .onlineDd.moreBtn a:hover{background:#1B6B9A;}


/*----------------------------------------------------------------------------
***                                                                eventSec
----------------------------------------------------------------------------*/
#eventSecInner{padding-top: 2em;}
#eventSec .titleBox .secTtl .mainSecTtl{font-size: 200%;}
#eventSec .eventBnrUl{margin-top: 2em;}
#eventSec .eventBnrLi{margin-bottom: 1em;}
#eventSec .eventBnrLi:last-child{margin-bottom: 0;}


/*----------------------------------------------------------------------------
***                                                           newsIntroExSec
----------------------------------------------------------------------------*/
#newsIntroExSecInner{padding-top: 0;}
#newsIntroExSec .newsSecBox .titleBox .secTtl .mainSecTtl,
#newsIntroExSec .introExSecBox .titleBox .secTtl .mainSecTtl{font-size: 180%;}

/*NEWS*/
#newsBox{border:#005873 solid 2px;width:780px;height: auto;padding:0;margin: 15px 0 0;}
#newsBox h4{font-size: 140%; text-align: center;}
#newsBox #newsBoxInner{overflow:auto;height: 450px; padding: 1.5em;}
#newsBox ul{ margin:0 5px 1em;}
#newsBox li{ border-bottom:#999 dotted 1px; margin-bottom:7px; padding-bottom:5px;}
#newsBox dl{display: flex; justify-content: flex-start; align-items: flex-start;}
#newsBox dt{ font-weight:normal; line-height:16px; vertical-align:middle; margin-bottom:3px; margin-right: 1em;}
#newsBox dt span{ padding: 0px 8px; font-size: 90%; color:#fff; margin-right:1em;display: inline-block; width: 6em; text-align: center;font-weight: bold;}
#newsBox dt .gogaku{background-color: #c49900;}
#newsBox dt .th{background-color: #0b6ab7;}
#newsBox dt .biz{ background-color:#e4007f;}
#newsBox dt .oshirase{background-color: #d42b2e;}
#newsBox dt .seminar{background-color: #8b57ad;}
#newsBox dt img{ margin-right:5px;}
#newsBox dd{ line-height:1.2em; width:calc(100% - 13em);}
#newsBox dt .academic{ background-color:#60b83a;}
#newsBox dd.kaigyou{word-break:break-all;}/*改行対策*/

/*導入事例*/
#newsIntroExSec .introExSecBox .introExUl{width: 350px; margin: 0 auto;}
#newsIntroExSec .introExSecBox .introExLi{border:1px solid #ccc; padding: 1.5em; position: relative;}
#newsIntroExSec .introExSecBox .introExLi:after{content: "";display: block;height: 0; width: 0; position: absolute;bottom: 8px; right: 8px;border-left: 15px solid transparent;border-bottom: 15px solid #eee;}
#newsIntroExSec .introExSecBox .introExLi a:hover{text-decoration: none;}
#newsIntroExSec .introExSecBox .introExDt{margin-top: 1em;text-align: center;}
#newsIntroExSec .introExSecBox .introExDt .subTtl{color:#333;}
#newsIntroExSec .introExSecBox .introExDt .ttl{font-size: 170%;color:#005872;}

/*採用事例*/
#newsIntroExSec .recruitSecBox {margin-top: 2em;}
#newsIntroExSec .recruitSecBox .titleBox{margin-bottom: 0;}
#newsIntroExSec .recruitSecBox .titleBox .secTtl .mainSecTtl{background-color: #408c96; color: #fff; font-size: 120%; padding: 0.5em 1em; font-weight: normal;}
#newsIntroExSec .recruitSecBox .recruitUl{background-color: #ededed;padding: 1.5em;}
#newsIntroExSec .recruitSecBox .recruitLi{margin-bottom: 1em;}
#newsIntroExSec .recruitSecBox .recruitLi:last-child{margin-bottom: 0;}
#newsIntroExSec .recruitSecBox .recruitLi a{display: block; background-color: #fff; border: 1px solid #408c96; position: relative; color: #333; padding: 1em; text-align: center;}
#newsIntroExSec .recruitSecBox .recruitLi a:after{content: ""; display: block; width: 0; height: 0; border-style: solid; position: absolute; top: 50%; right: 1em; transform: translate(0, -50%);border-color: transparent transparent transparent #888; border-width: 4px 0 4px 6px;}

#newsIntroExSec .recruitSecBox .recruitLi a:hover{text-decoration: none;}