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

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	index.html
--------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------
	share
-------------------------------------------------------------------------------*/
.sec { padding: 4vw 0 7vw; }

.sec h2 { font-weight: bold; }
.sec h2 span.txtEn { font-size: 360%; display: block; letter-spacing: 0.04em; font-family: "Open Sans", sans-serif; }
.sec h2 span.txtJp { display: block; margin-top: 0; font-size: 86%; color: #08287f; letter-spacing: 0.02em; }

    /*sp時*/
    @media screen and (max-width: 750px) {
        .sec h2 span.txtEn { font-size: 220%; }
        .sec h2 span.txtJp { font-size: 86%; line-height: 1; }    
    }

/*------------------------------------------------------------------------------
	MV
-------------------------------------------------------------------------------*/
#mvSec { position: relative; border-bottom: 5px solid #000; height: 100vh; overflow: hidden; }
#mvSec h1 { position: absolute; bottom: 4%; left: 2%; z-index: 2; }
#mvSec h1 img { max-width: 630px; padding: 40px; }
#mvSec #mvSlider { background: #000; margin-inline: auto; overflow: hidden; }
#mvSec #mvSlider .mvSlide { height: 100%; }
#mvSec #mvSlider .mvSlide img { width: 100%; height: 100%; object-fit: cover; display: block; }

#mvSec #mvSlider ,
#mvSec #mvSlider  .slick-list,
#mvSec #mvSlider  .slick-track { height: 100%; }

    /*sp時*/
    @media screen and (max-width: 750px) {
        #mvSec { height: auto; }
        #mvSec h1 { position: absolute; bottom: 0; left: 0; z-index: 2; }
        #mvSec h1 img { max-width: 630px; padding: 20px 60px 20px 20px; }
    }

@keyframes zoomUp {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}
.addAni {
    animation: zoomUp 10s linear 0s normal both;
}


/*------------------------------------------------------------------------------
	news
-------------------------------------------------------------------------------*/
#newsSec { width: 90%; max-width: 1200px; margin: 80px auto; }
#newsSec h2 { font-weight: 500; display: flex; align-items: center; }
#newsSec h2 span.txtEn { font-size: 200%; display: block; }
#newsSec h2 span.txtJp { font-size: 80%; display: block; margin-left: 10px; color: #08287f; letter-spacing: 0.02em; }

#newsSec ul { margin-top: 20px; border-bottom: 1px solid #ddd; }
#newsSec ul li { border-top: 1px solid #ddd; display: flex; }
#newsSec ul li a { display: flex; width: 100%; padding: 22px 80px 22px 0; position: relative; }
#newsSec ul li > div { display: flex; width: 100%; padding: 22px 0; }
#newsSec ul li a::before { position: absolute; content: ""; display: block; right: 50px; top: 50%; transform: translateY(-50%); width: 1px; height: 80%; border: 1px solid transparent; background-image: radial-gradient(circle, #ccc 1px, transparent 2px); background-size: 1px 7px; background-repeat: repeat-y; background-position: left top; }
#newsSec ul li a::after { position: absolute; content: ""; display: block; right: 20px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background-color: #08287f; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#newsSec ul li a.iconPdf::after { right: 15px;width: 18px; height: 18px; background-color: transparent; clip-path: none; background: url("/corp/ktc/common/images/icon_pdf.webp") no-repeat center center / contain; }
#newsSec ul li a.iconWin::after { right: 15px; width: 18px; height: 18px; background-color: transparent; clip-path: none; background: url("/corp/ktc/common/images/icon_win.webp") no-repeat center center / contain; }
#newsSec ul li .dayBox { margin-right: 20px; min-width: 9.5em; }

    /*pc時*/
    @media screen and (min-width: 750px) {
        #newsSec ul li a { transition: color .4s, background .4s;}
        #newsSec ul li a:hover { color: #002a8b; background: #f5fafb; }
    }

    /*sp時*/
    @media screen and (max-width: 750px) {
        #newsSec { width: 86%; margin: 8vw auto; }
        #newsSec h2 span.txtEn { font-size: 160%; }

        #newsSec ul { margin-top: 10px; }
        #newsSec ul li { display: block; }
        #newsSec ul li a { display: block; }
        #newsSec ul li > div { display: block; }
        #newsSec ul li .dayBox { font-size: 90%; }
    }

/*------------------------------------------------------------------------------
	company
-------------------------------------------------------------------------------*/
#companySec { background: url("/corp/ktc/images/company_img.webp") no-repeat center top / 100%, url("/corp/ktc/images/company_bg.webp") no-repeat left -50px top 200px / 75%, #e7eaf2; text-align: center; padding: 25vw 0 6vw; }
#companySec h2 + p { width: 90%; margin: 40px auto 0; font-size: 110%; line-height: 2.2; }
#companySec #companyLinkBox { display: flex; justify-content: space-between; margin: 60px auto 0; max-width: 1200px; width: 90%; }
#companySec #companyLinkBox li { width: 32%; display: flex; align-items: center; background: #fff; font-size: 120%; font-weight: 500; border-radius: 10px; box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, .006); }
#companySec #companyLinkBox li a { display: block; padding: 25px; position: relative; width: 100%; border-radius: 10px; }
#companySec #companyLinkBox li a span.txtComing { display: block; font-size: 80%; }
#companySec #companyLinkBox li a::before { position: absolute; content: ""; display: block; right: 50px; top: 50%; transform: translateY(-50%); width: 1px; height: 68px; border: 1px solid transparent; background-image: radial-gradient(circle, #ccc 1px, transparent 2px); background-size: 1px 7px; background-repeat: repeat-y; background-position: left top; }
#companySec #companyLinkBox li a::after { position: absolute; content: ""; display: block; right: 22px; top: 50%; transform: translateY(-50%); width: 9px; height: 7px; background-color: #08287f; clip-path: polygon(0 0, 100% 0, 50% 100%); }

#companySec #companyLinkBox li.active { background: #08287f; }
#companySec #companyLinkBox li.active a { color: #fff; }
#companySec #companyLinkBox li.active a::after { background: #fff; clip-path: polygon(50% 0, 0 100%, 100% 100%); }

    /*pc時*/
    @media screen and (min-width: 750px) {
        #companySec #companyLinkBox li { transition: background .4s; }
        #companySec #companyLinkBox li:hover { background: #08287f; }
        #companySec #companyLinkBox li a { transition: color .4s; }
        #companySec #companyLinkBox li a:hover { color: #fff; }
        #companySec #companyLinkBox li a::after { transition: background .4s; }
        #companySec #companyLinkBox li a:hover::after { background: #fff; }
    }

    /*sp時*/
    @media screen and (max-width: 750px) {
        #companySec { background: url("/corp/ktc/images/company_img.webp") no-repeat center top / 100%, url("/corp/ktc/images/company_bg.webp") no-repeat left -50px top 16% / 125%, #e7eaf2; }
        #companySec { padding: 28vw 0 15vw; }
        #companySec h2 + p { margin-top: 6vw; font-size: 100%; }
        #companySec #companyLinkBox { margin-top: 8vw; width: 86%; }
        #companySec #companyLinkBox li { width: 30%; font-size: 90%; margin-top: 4vw; line-height: 1.4; }
        #companySec #companyLinkBox li a { padding: 10px 12px 10px 0; }
        #companySec #companyLinkBox li a::before { right: 20px; height: 42px; }
        #companySec #companyLinkBox li a::after { right: 5px; }
    }

.contentsIn { background: #fff; width: 90%; max-width: 1200px; margin: 40px auto 0; display: none; }
.contentsIn.active { display: block; }
.contentsIn > div { width: 90%; max-width: 1080px; margin: 0 auto; }

    /*sp時*/
    @media screen and (max-width: 750px) {
        .contentsIn { margin-top: 20px; }
        .contentsIn > div { width: 86%; }
    }

/*profile*/
#profileSec > div { padding: 20px 0; }
#profileSec table { width: 100%; }
#profileSec th, #profileSec td { border-bottom: 1px solid #ccc; padding: 20px 0; }
#profileSec tr:last-child th, #profileSec tr:last-child td { border: none; }
#profileSec th { font-weight: 500; width: 8em; }

    /*sp時*/
    @media screen and (max-width: 750px) {
        #profileSec > div { padding: 5px 0 10px; }
        #profileSec table,
        #profileSec tr,
        #profileSec th,
        #profileSec td { display: block; }
        #profileSec th { padding: 15px 0 0; border: none; }
        #profileSec td { padding: 0 0 15px; }
    }

/*historySec*/
#historySec > div { padding: 80px 0; }

    /*sp時*/
    @media screen and (max-width: 750px) {
        #historySec > div { padding: 30px 0; }
    }

/*business*/
#contactTelSec > div { padding: 10px 0 40px; }
#contactTelSec .hBg { margin-top: 50px; }
#contactTelSec .contactArea { display: flex; justify-content: flex-start; text-align: left; padding: 30px 0; }
#contactTelSec .contactArea .addressBox { width: 360px; padding-left: 30px; }
#contactTelSec .contactArea .contactBox { width: calc((100% - 500px)/2); line-height: 1.6; padding-left: 20px; border-left: 1px solid #ddd; margin-left: 20px; }
#contactTelSec .contactArea .contactBox h4 { font-size: 86%; font-weight: normal; }
#contactTelSec .contactArea .contactBox .txtTel { font-size: 150%; font-weight: 500; padding-left: 0.4em; }
#contactTelSec .contactArea .contactBox .txtFax { padding-left: 0.8em; }

    /*pc時：1100以下*/
    @media screen and (max-width: 1100px) {
        #contactTelSec > div { padding: 1px 0 40px; }
        #contactTelSec .hBg { margin-top: 30px; }
        #contactTelSec .contactArea { padding: 15px 0 0; display: block; }
        #contactTelSec .contactArea .addressBox { width: 100%; padding-left: 10px; }
        #contactTelSec .contactArea .contactBox { width: 100%; padding-left: 0; padding-top: 10px; margin-top: 20px; margin-left: 0; border-left: none; border-top: 1px solid #ddd; }
        #contactTelSec .contactArea .contactBox .txtTel { font-size: 120%; }
    }


/*------------------------------------------------------------------------------
	business
-------------------------------------------------------------------------------*/
#businessSec { text-align: center; background: #f4f5f7; }
#businessSec .businessArea { margin: 80px auto 0; width: 90%; max-width: 1200px; position: relative; }
#businessSec .businessArea { display: flex; }
#businessSec .businessArea .imgBox { max-width: 735px; width: 61.25%; }
#businessSec .businessArea .imgBox img { border-radius: 12px; }
#businessSec .businessArea .infoBox { position: absolute; top: 50%; transform: translateY(-50%); max-width: 580px; width: 70%; background: #fff; padding: 4% 6%; box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, .05); border-radius: 12px; }
#businessSec .businessArea .infoBox h3 { font-size: 180%; line-height: 1.6; font-weight: 500; position: relative; }
#businessSec .businessArea .infoBox h3::after { content: ""; display: block; position: absolute; width: 50px; height: 2px; background: #08287f; bottom: -20px; left: 50%; transform: translateX(-50%); }
#businessSec .businessArea .infoBox h3 + p { margin-top: 40px; text-align: left; }
#businessSec .btnInner { margin-top: 30px; }

#businessSec .businessArea.leftImg .infoBox { right: 0; }
#businessSec .businessArea.leftImg { justify-content: flex-start; }
#businessSec .businessArea.rightImg .infoBox { left: 0; }
#businessSec .businessArea.rightImg { justify-content: flex-end; }

    /*pc時：800以下*/
    @media screen and (max-width: 800px) {
        #businessSec .businessArea { display: block; margin: 10vw auto 0; width: 86%; box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, .05); border-radius: 12px; }
        #businessSec .businessArea .imgBox { width: 100%; }
        #businessSec .businessArea .imgBox img { border-radius: 12px 12px 0 0; }
        #businessSec .businessArea .infoBox { position: static; width: 100%; transform: translateY(0); border-radius: 0 0 12px 12px; padding: 8vw 8vw 12vw; box-shadow: none; max-width: 100%; }
        #businessSec .businessArea .infoBox h3 { font-size: 140%; line-height: 1.6; }
        #businessSec .businessArea .infoBox h3::after { bottom: -5vw; }
        #businessSec .businessArea .infoBox h3 + p { margin-top: 10vw; }
        #businessSec .btnInner { margin-top: 6vw; }
    }

/*------------------------------------------------------------------------------
	recruit
-------------------------------------------------------------------------------*/
#recruitSec { text-align: center; background: url("/corp/ktc/images/recruit_bg.webp") no-repeat right -300px top -160px; }
#recruitSec #recruitArea { display: flex; justify-content: space-between; margin: 80px auto 0; width: 90%; max-width: 1200px; }
#recruitSec #recruitArea .imgBox { max-width: 700px; width: 58.33%; }
#recruitSec #recruitArea .imgBox img { border-radius: 12px; }
#recruitSec #recruitArea .infoBox { text-align: left; max-width: 440px; width: 36.67%; }
#recruitSec #recruitArea .infoBox h3 { border-top: 1px solid #08287f; border-bottom: 1px solid #08287f; color: #08287f; padding: 10px 0; font-size: 120%; font-weight: 500; }
#recruitSec #recruitArea .infoBox h3 + div { margin-top: 15px; }
#recruitSec #recruitArea .infoBox h3 + div + h3 { margin-top: 40px; }
#recruitSec #recruitArea .infoBox h3#newgraduate + div img { max-width: 195px; }
#recruitSec #recruitArea .infoBox .atComment { font-size: 80%; margin-top: 2px; }

    /*sp時*/
    @media screen and (max-width: 750px) {
        #recruitSec { background: url("/corp/ktc/images/recruit_bg.webp") no-repeat right -60vw top -20vw / 140vw; }
        #recruitSec #recruitArea { display: block; width: 86%; margin-top: 8vw; }
        #recruitSec #recruitArea .imgBox { width: 100%; }
        #recruitSec #recruitArea .infoBox { width: 100%; max-width: 100%; }
        #recruitSec #recruitArea .infoBox h3 { margin-top: 8vw; }
        #recruitSec #recruitArea .infoBox h3 + div + h3 { margin-top: 8vw; }
        #recruitSec #recruitArea .infoBox h3 + div { margin-top: 5vw; }
    }