/* ------------------------------
 見出し
------------------------------ */
/*メインイメージ　H1*/
.mainimg h1 {
    position: absolute;
    font-size: 3.8rem;
    font-weight: bold;
    text-align: left;
    color: #fff;
    letter-spacing: 0.05em;
    bottom: 50px;
    left: 2.631%;
    z-index: 11;
}
.mainimg h1 img {
    display: block;
    width: 1010px;
}
/*H2*/
.contentsHome h2 {
    position: relative;
    font-size: 2.1rem;
    font-weight: bold;
    text-align: left; 
    padding-bottom: 10px;
    margin-bottom: 50px;
    z-index: 2;
}
.contentsHome h2::before {
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 3px;
    background-color: #f8b500;
    bottom: 0;
    left: 0;
}
/*サブタイトル*/
.contentsHome .subtitle {
    position: absolute;
    font-size: 16.5rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: #e7e7e7;
    z-index: 1;
    top: 0;
    left: 0;
}
@media print, screen and (min-width: 768px) and (max-height:768px) {
    /*メインイメージ　H1*/
    .mainimg h1 img {
        width: 684px;
    }
}
@media print, screen and (min-width: 768px) and (max-width:1240px) {
    /*メインイメージ　H1*/
    .mainimg h1 img {
        width: 808px;
    }
}
/* ------------------------------
 スマホ用コード（見出し）
------------------------------ */
@media screen and (max-width: 767px) {
    /*メインイメージ　H1*/
    .mainimg h1 {
        font-size: 2.0rem;
        bottom: 20px;
    }
    .mainimg h1 img {
        width: calc(100% - 2.631%);
    }
    /*H2*/
    .contentsHome h2 {
        font-size: 2.0rem;
        margin-bottom: 30px;
    }
    /*サブタイトル*/
    .contentsHome .subtitle {
        font-size: 5.5rem;
        letter-spacing: -0.025em;
    }
}
/* ------------------------------
 メインイメージ
------------------------------ */
.mainimg {
    position: relative;
    /*width: 100%;*/
}
.mainimg::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
    background: rgba(0, 0, 0, 0.2);
}
.mainimg iframe {
    position: absolute;
    display: block;
    width: 100vw;
    height: 56.25vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* ------------------------------
 PC用限定CSS
------------------------------ */
@media print, screen and (min-width: 768px) {
    .mainimg {
        margin-top: 60px;
        height: calc(100vh - 60px);
    }
    .mainimg .copyright {
        position: absolute;
        right: 30px;
        top: calc(120px + 19.607%);
        font-size: 1.3rem;
        font-weight: 400;
        writing-mode: vertical-lr;
        color: #fff;
        z-index: 11;
    }
    .mainimg .arrowDown {
        position: absolute;
        right: 30px;
        bottom: 40px;
        z-index: 11;
    }
    .mainimg .arrowDown a {
        height: 110px;
        font-size: 1.0rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-decoration: none;
        text-align: left;
        font-family: 'Inter', sans-serif;
        writing-mode: vertical-lr;
        color: #fff;
        background: url('../img/icon_arrow_down.svg') no-repeat left bottom ;
        padding-left: 5px;
    }
    .mainimg .arrowDown a:hover
    .mainimg .arrowDown a:focus {
        opacity: .8;
    }
    .mainimg .splide {
        display: none;
    }
}
/* ------------------------------
 タブレット（メインイメージ）
------------------------------ */
@media print, screen and (min-width: 768px) and (max-width:1240px) {
    .mainimg {   
        height: 56.25vw;        
    }
    .mainimg iframe {
        min-width: 1240px;
        min-height: 698px;
    }
}
/* ------------------------------
 スマホ用コード（メインイメージ）
------------------------------ */
@media screen and (max-width: 767px) {
    .mainimg {
        margin-top: 60px;
    }
    .mainimg iframe {
        display: none;
    }
    .mainimg .splide {
        display: block;
        width: 100%;
        height: 100%;
    }
    .mainimg .splide img {
        width: 100%;
    }
    .mainimg .copyright,
    .mainimg .arrowDown {
        display: none;
    }
}
/* ------------------------------
 リード文
------------------------------ */
.leadBlock {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.9;
    text-align: center;
    color: #333333;
    margin-bottom: 120px;
}
.leadBlock p {
    margin-bottom: 50px;
}
/* ------------------------------
 スマホ用コード（リード文）
------------------------------ */
@media screen and (max-width: 767px) {
    .leadBlock {
        font-size: 1.8rem;
        text-align: left;
        padding: 0 8%;
        margin-bottom: 70px;
    }
    .leadBlock p {
        margin-bottom: 40px;
    }
}
/* ------------------------------
 社長メッセージ
------------------------------ */
.messageBlock {
    position: relative;
}
.messageBlock::after {
    content: "";
    display: block;
    clear: both;
}
.contentsHome .messageBlock h2 {
    text-align: center;
}
.contentsHome .messageBlock h2::before {
    right: 0;
    margin: auto;
}
.contentsHome .messageBlock .subtitle {
    text-align: center;
    right: 0;
    margin: auto;
}
.messageBlock .img img {
    border-radius: 10px;
}
.messageBlock .text p {
    line-height: 2;
}
/* ------------------------------
 PC用限定CSS
------------------------------ */
@media print, screen and (min-width: 768px) {
    .messageBlock {
        width: 1140px;
        padding-top: 110px;
        margin: 0 auto 150px;
    }
    .messageBlock .img {
        width: 644px;
        overflow: hidden;
        float: left;
        margin-right: 50px;
    }
    .messageBlock .text {
        width: 446px;
        float: right;
    }
    .messageBlock .text img {
        margin-bottom: 40px;
    }
    .messageBlock .text p {
        margin-bottom: 40px;
    }

}
/* ------------------------------
 スマホ用コード（社長メッセージ）
------------------------------ */
@media screen and (max-width: 767px) {
    .messageBlock {
        padding: 30px 8% 0;
        margin-bottom: 80px;
    }
    .messageBlock .img,
    .messageBlock .text img,
    .messageBlock .text p {
        margin-bottom: 30px;
    }
    .messageBlock .text > img {
        width: 306px;
    }
    
}
/* ------------------------------
 トクラスを知る
------------------------------ */
.aboutBlock {
    position: relative;
}
.aboutBlock .img img {
    border-radius: 10px 0 0 10px;
}
.contentsHome .aboutBlock .text {
    position: relative;
}
/* ------------------------------
 PC用限定CSS
------------------------------ */
@media print, screen and (min-width: 768px) {
    .aboutBlock {
        width: 1140px;
        padding-top: 260px; 
        margin: 0 auto 140px;
    }
    .aboutBlock .img {
        position: absolute;
        width: 1020px;
        top: 90px;
        left: calc(50% - 70px);
        z-index: 0;
    }
    .contentsHome .aboutBlock .text h2 + img {
        margin-bottom: 50px;
    }
    .contentsHome .aboutBlock .text .btn {
        margin-bottom: 30px;
    }
    .aboutBlock .Links {
        display: flex;
        width: 668px;
        background-color: #fff;
        padding-right: 35px;
        padding-top: 35px;
        border-radius: 0 18px 0 0;
        gap: 0 13px;
    }

}
/* ------------------------------
 スマホ用コード（トクラスを知る）
------------------------------ */
@media screen and (max-width: 767px) {
    .aboutBlock {
        padding: 50px 0 0;
        margin-bottom: 60px;
    }
    .aboutBlock .subtitle {
        padding-left: 8%;
    }
    .aboutBlock .img {
        padding-left: 8%;
        margin-bottom: 25px;
    }
    .aboutBlock .text {
        padding: 0 8%;
    }
    .aboutBlock .text > img {
        width: 288px;
        margin-bottom: 40px;
    }
    .contentsHome .aboutBlock .text .btn {
        margin-bottom: 70px;
    }
    .aboutBlock .Links > div:first-child {
        margin-bottom: 40px;
    }
}
/* ------------------------------
 仕事を知る
------------------------------ */
.jobBlock {
    position: relative;
}
.jobBlock::after {
    content: "";
    display: block;
    clear: both;
}
.jobBlock .img img {
    border-radius: 0 10px 10px 0;
}
/* ------------------------------
 PC用限定CSS
------------------------------ */
@media print, screen and (min-width: 768px) {
    .jobBlock {
        width: 1140px;
        padding-top: 115px;
        margin: 0 auto 145px;
    }
    .contentsHome .jobBlock .subtitle {
        left: 694px;
    }
    .jobBlock .img {
        position: absolute;
        width: 1020px;
        top: 65px;
        right: calc(50% - 70px);
        z-index: 0;
    }
    .jobBlock .text {
        position: relative;
        float: right;
        width: 446px;
        z-index: 2;
    }
    .jobBlock .text h2 + img {
        margin-bottom: 50px;
    }
    .jobBlock .text .btn {
        margin-bottom: 30px;
    }
    .jobBlock .Links {
        display: flex;
        padding-left: 35px;
        padding-top: 35px;
        border-radius: 18px 0 0 0;
        margin-left: -226px;
        background-color: #fff;
        gap: 0 13px;
    }

}
/* ------------------------------
 スマホ用コード（仕事を知る）
------------------------------ */
@media screen and (max-width: 767px) {
    .jobBlock {
        padding: 30px 0 0 0;
        margin-bottom: 60px;
    }
    .jobBlock .img {
        padding-right: 8%;
        margin-bottom: 25px;
    }
    .contentsHome .jobBlock .subtitle {
        padding-right: 8%;
        left: auto;
        right: 0;
    }
    .jobBlock .text {
        padding: 0 8%;
    }
    .jobBlock .text > img {
        width: 218px;
        margin-bottom: 40px;
    }
    .jobBlock .text .btn {
        margin-bottom: 60px;
    }
    .jobBlock .Links > div:first-child {
        margin-bottom: 40px;
    }
}
/* ------------------------------
 人を知る
------------------------------ */
.personBlock {
    position: relative;
}
.personBlock .img img {
    border-radius: 10px 0 0 10px;
}
/*splide*/
.splide__arrows {
    text-align: right;
}
.splide__arrow {
    width: 40px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}
.splide__arrow::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #333;
    margin: auto;
}
.splide__arrow.splide__arrow--prev::before {
    border-left: 2px solid #333;
    transform: rotate(-45deg);
}
.splide__arrow.splide__arrow--next::before {
    border-right: 2px solid #333;
    transform: rotate(45deg);
}
.personBlock .splide__pagination {
    gap: 0 12px;
    margin-top: 15px;
}
.splide__pagination li .splide__pagination__page {
    width: 10px;
    height: 10px;
    background-color: #e7e7e7;
    border-radius: 100%;
    cursor: pointer;
}
.splide__pagination li .splide__pagination__page.is-active {
    background-color: #f9d826;
}
/* ------------------------------
 PC用限定CSS
------------------------------ */
@media print, screen and (min-width: 768px) {
    .personBlock {
        padding-top: 120px;
        width: 1140px;
        margin: 0 auto 110px;
    }
    .personBlock .img {
        position: absolute;
        width: 1020px;
        top: 210px;
        left: calc(50% - 60px);
        z-index: 0;
    }
    .personBlock .text {
        position: relative;
        z-index: 2;
    }
    .personBlock .text h2 + img {
        margin-bottom: 40px;
    }
    .personBlock .text .btn {
        margin-bottom: 0;
    }
    /*splide*/  
    .personBlock .text .splide {
        width: 430px;
    }
    .splide-wrapper {
        border-radius: 10px;
        overflow: hidden;
    }
}
/* ------------------------------
 スマホ用コード（人を知る）
------------------------------ */
@media screen and (max-width: 767px) {
    .personBlock {
        padding: 30px 0 0 0;
        margin-bottom: 90px;
    }
    .personBlock .subtitle {
        padding-left: 8%;
    }
    .personBlock .img {
        padding-left: 8%;
        margin-bottom: 25px;
    }
    .personBlock .text {
        padding: 0 8%;
    }
    .personBlock .text > img {
        width: 262px;
        margin-bottom: 40px;
    }
    .personBlock .text .btn {
        margin-bottom: 40px;
    }
    /*splide*/  
    .personBlock .text .splide {
        margin: 0 -8vw;
    }
}

/* ------------------------------
 採用について
------------------------------ */
.recruitmentBlock {
    position: relative;
}
.recruitmentBlock .subtitle {
    text-align: center;
    right: 0;
    margin: auto;
}
.recruitmentBlock h2 {
    text-align: center;
}
.recruitmentBlock h2::before {
    right: 0;
    margin: auto;
}
.recruitmentBlock .btn {
    margin-bottom: 60px;
}
.recruitmentBlock .Links {
    display: flex;
}
.recruitmentBlock .Links li img {
    border-radius: 0;
}
/* ------------------------------
 PC用限定CSS
------------------------------ */
@media print, screen and (min-width: 768px) {
    .recruitmentBlock {
        padding-top: 105px;
        width: 1140px;
        margin: 0 auto;
    }
    .recruitmentBlock .Links li {
        width: calc(100% / 4);
    }
    .recruitmentBlock .Links li:first-child img {
        border-radius: 10px 0 0 10px;
    }
    .recruitmentBlock .Links li:last-child img {
        border-radius: 0 10px 10px 0;
    }

}
/* ------------------------------
 スマホ用コード（採用について）
------------------------------ */
@media screen and (max-width: 767px) {
    .recruitmentBlock {
        padding-top: 30px;
    }
    .recruitmentBlock .subtitle {
        font-size: 5.3rem;
        letter-spacing: -0.05em;
    }
    .recruitmentBlock .Links {
        flex-wrap: wrap;
    }
    .recruitmentBlock .Links li {
        width: calc(100% / 2);
    }
    .recruitmentBlock .Links li:nth-last-child(n+3) {
        margin-bottom: 50px;
    }
    .recruitmentBlock .Links li:nth-child(2n-1) p {
        margin-left: 20px;
    }
}