@charset "UTF-8";

/*==================
画面設計
768px をブレイクポイントとし
それ以上はPCレイアウト
768px以下はスマホレイアウトととする
@media screen and ( max-width:767px) {  }
==================*/

:root {
    --watabegreen:#005726;
    --watabelightgreen:#A4C798;
    --bg-gray:#f5f5f5;
}

html {
    font-size: 10px;
    background-color: #FFFFFF;
    height: 100%;
    color: #333;
    /* padding-top: 80px; */
    scroll-behavior: smooth;
}
body {
    height: 100%;
    
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.6rem;
}
section, header, footer, div, ul, li, dl, dt, dd {
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem;
}
table tr th{
    font-weight: 400;
}


.wfontSanSerif {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-style: normal;
}


.spDispOnly {
    display: none;
}
.pcDispOnly {
    display: inline;
}
@media screen and (max-width:767px) {
    html {
        font-size: 9px;
        /* padding-top: 60px; */
    }
    .spDispOnly {
        display: block;
    }
    .pcDispOnly {
        display: none;
    }
    img {
        max-width: 100%;
    }
}
a:hover img {
    opacity: 0.8;
}
a.pagetopBtn {
    display: block;
    position: fixed;
    right: 10px;
    bottom: 20px;
    padding: 5px;
    background-color: #474747;
    color: #FFFFFF;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    transform: scale(0.8);
    opacity: 0.8;
    border-radius: 100%;
    z-index: 999;
    text-decoration: none;
    cursor: pointer;
}

.normalTextStyle{
    font-size: 1.5rem;
    line-height: 2;
}
/* ここまで初期設定 */

/* 共通部分 */





html{
    background-color: var(--bg-gray);
}



/* トップページ */
.headerSection{
    width: 100%;
    /* padding: 0 20px; */
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: .9;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: 0 auto;
    background-color: #FFFFFF;
    /* background: linear-gradient(100deg, rgba(255,207,0,1) 0%, rgba(255,207,0,1) 30%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 100%); */
}
.headerSection .inner{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.headerSection .siteLogo{
    padding-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.headerSection .globalNav{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 30px;
}
.headerSection .globalNav a{
    display: block;
    font-size: 1.4rem;
    font-weight: 900;
    text-align: center;
    padding: 14px 0 14px;
    color: #333333;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.headerSection .globalNav a.access{
    border-left: #eee 1px solid;
    padding-left: 30px;
}
.headerSection .globalNav a.inquiry{
    background-color: var(--watabegreen);
    color: #ffffff;
    padding: 14px 30px;

    border-left: var(--watabelightgreen) 10px solid;
}

@media screen and ( max-width:767px) {
    .headerSection{
        height: 60px;
    }
    .headerSection .logo img{
        max-width: 190px;
    }
    .headerSection .globalNav{
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: stretch;
        padding: 80px 20px 0;
        gap: 6px;
    }
    .headerSection .globalNav a{
        display: block;
        font-size: 1.8rem;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 26px 0 22px;
        color: #FFF;
        text-decoration: none;
        background-color: var(--watabegreen);
        border-radius: 4px;
    }
    .headerSection .globalNav a.access{
        border-left: #eee 0px solid;
        padding-left: 0px;
    }
    .headerSection .globalNav a img{
        display: none;
    }
    .headerSection .globalNav a.inquiry{
        padding: 26px 0 22px;
        border-left: var(--watabelightgreen) 0px solid;
    }
}


/*トグルボタンのスタイルを指定*/
.Toggle{
    display: none;
}
@media screen and ( max-width:767px) {
    .Toggle {
        display: block;
        position: fixed;    /* bodyに対しての絶対位置指定 */
        width: 34px;
        height: 42px;
        cursor: pointer;
        z-index: 10;
        top: 10px;
        right:15px;
    }
    .Toggle span {
        display: block;
        position: absolute;
        width: 34px;
        border-bottom: solid 3px #333;
        -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
        -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
        transition: .35s ease-in-out;			/*変化の速度を指定*/
    }
    /*各ボーダー少しずつずらす*/
    .Toggle span:nth-child(1) {
        top:5px;
    }
    .Toggle span:nth-child(2) {
        top: 17px;
    }
    .Toggle span:nth-child(3) {
        top: 30px;
    }
    .Toggle.active span:nth-child(1) {
        top: 18px;
    /* 1番目のspanをマイナス45度に */
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    /* 2番目と3番目のspanを45度に */
    .Toggle.active span:nth-child(2),
    .Toggle.active span:nth-child(3) {
        top: 18px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }


    .headerSection .globalNav{
        width: 100vw;
        height: auto;
        min-height: 100vh;
        background-color: rgba(255, 255, 255, 0.95);
        color: #fff;
        position: fixed; 
        top: 0;
        left: 0;
        z-index: 9;
        text-align:center;
        transition: 0.5s ease;/*滑らかに表示*/
        -webkit-transform: translateX(100%);/*画面より100%外へ押し出し非表示にさせる*/
    /*  transform: translateX(-100%);/*右から出す場合は、マイナス100%としてください*/
    }
    /*OPEN時の動き*/
    .headerSection .linkList.open {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*メニューを元の位置へ戻す*/
    }
    
}






main {
    padding-top: 80px;
}
@media screen and ( max-width:767px) {
    main {
        padding-top: 60px;
    }
}

.heroSec{
    width: 100%;
    height: 600px;
    position: relative;
    
    display: flex;
}
.hero__overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.1) 60%);
    z-index: -1;
}
.heroSec video {
    width: 100%;
    height: 600px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    object-fit: cover;
}
.hero__content{
    z-index: 10;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 60px;
}
@media screen and ( max-width:767px) {
    .heroSec video {
        height: 100svh;
    }
    .hero__content{
        align-items: flex-end;
        padding:20px;
        width: 80vw;
    }
}

/*  */
.topServiceSec{
    width: 100%;
    background-color: #FFFFFF;
}
.topServiceSec .inner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border-top: var(--watabegreen) 10px solid;
}
.topServiceSec .inner .lathe-card{
    
}
a.lathe-card{
    width: 50%;
    display: block;
    padding: 40px 40px;
    /* background-color: #FFFFFF; */
    text-decoration: none;
    color: #333333;
    height: 100%;
}
a.lathe-card:nth-child(1){
    border-right: #eeeeee 1px solid;
}
.lathe-card__en{
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 12px;
    color: #000000;;
}
.lathe-card__title{
    font-size: 2.4rem;
    font-weight: 900;
    margin-bottom: 20px;
    color: var(--watabegreen);
}
.lathe-card__text{
    font-size: 1.6rem;
    line-height: 1.8;
}
@media screen and ( max-width:767px) {
    .topServiceSec .inner{
        flex-direction: column;
    }
    a.lathe-card{
        width: 100%;
        padding: 20px 0px;
    }
    a.lathe-card:nth-child(1){
        border-right: #eeeeee 0px solid;
        border-bottom: #eeeeee 1px solid;
    }
}

.topStrengthSec{
    width: 100%;
    background-color: var(--watabegreen);
    color: #FFFFFF;
}
.topStrengthSec .inner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    background-image: url(../image/strengthheaderbg.svg);
    background-position: center right;
    background-repeat: no-repeat;
}
.topStrengthSec .sectionTitle{
    font-size: 3.2rem;
    font-weight: 900;
}
.topStrengthSec .sectionTitle__en{
    padding-top: 20px;
}
.strength__header{
    padding-top: 40px;
}
.strengthListWrapper{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: #000000;
    position: relative;
    z-index: 1;
}
.strengthBgImage{
    width: 100%;
    height: 900px;
    background-image: url(../image/topproductimg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: -80px;
    z-index: -1;
}
.strength-card{
    width: 33%;
    max-width: 360px;
    flex: 1;
    padding: 30px;
    border-right: #eeeeee 1px solid;
    position: relative;
}
.strength-card:nth-child(3){
    border: none;
}
.strength-card__num{
    font-size: 5.5rem;
    font-weight: 800;
    position: absolute;
    top: 10px;
    left: 30px;
    color: var(--watabelightgreen);
    opacity: 0.3;
}
.strength-card__icon{
    text-align: center;
    padding: 10px;
}
.strength-card__title{
    text-align: center;
    color: #000000;
    font-size: 2.2rem;
    font-weight: 700;
    padding: 20px 0;
}
.strength-card__text{
    font-size: 1.4rem;
    line-height: 1.6;
}
@media screen and ( max-width:767px) {
    .strengthListWrapper{
        flex-direction: column;
        padding: 20px 0;
    }
    .strength-card{
        width: 100%;
        border-right: #eeeeee 0px solid;
    }
}



.topAboutSec{
    width: 100%;
}
.topAboutSec .inner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}
.topAbout__header{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}
.topAbout__titleText{
    width: 300px;
}
.topAbout__content{
    flex: 1;
}
.topAboutSec .sectionTitle{
    font-size: 3.8rem;
    font-weight: 700;
    color: var(--watabegreen);
}
.topAboutSec .sectionTitle__en{
    font-size: 1.6rem;
    margin-top: 10px;
    padding-bottom: 40px;
    position: relative;
}
.topAboutSec .sectionTitle__en::after{
    width: 80px;
    height: 6px;
    display: block;
    content: "";
    background-color: var(--watabegreen);
    position: absolute;
    bottom: 0;
    left: 0;
}
.topAboutSec .about__lead{
    font-size: 3.2rem;
    font-weight: 800;
}
.topAboutSec .about__desc{
    font-size: 1.6rem;
    line-height: 1.6;
    padding: 30px 0;
}
.googleMap iframe{
    width: 100%;
    height: 400px;
    margin-top:60px;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}
.topAbout__under{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.topAbout__under .about__links li{
    padding: 8px 0;
}
@media screen and ( max-width:767px) {
    .topAbout__header{
        flex-direction: column;
    }
    .topAbout__under{
        flex-direction: column-reverse;
        gap: 20px;
        align-items: center;
    }
}




.footerSec{
    width: 100%;
    background-color: var(--watabegreen);
    border-top: var(--watabelightgreen) 10px solid;
    padding: 40px 20px 0;
    color: #FFFFFF;
}
.footerSec .inner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.footerContactSec{
    width: 100%;
    border-bottom: #ffffff 1px solid;
    padding: 40px 0px 40px;
    display: flex;
    justify-content: space-between;
}
.footerContactHead{
    margin-bottom: 30px;
}
.footer__copy{
    text-align: center;
    font-size: 1.2rem;
    padding: 30px 0;
}
.footerLinkSec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}
.footerLinkSec .footer__nav{
    font-size: 1.4rem;
    display: flex;
    justify-content: flex-start;
    gap: 30px;
}
.footerContactHead .sectionTitle{
    font-size: 3.2rem;
    font-weight: 700;
    color: #FFFFFF
}
.footerContactHead .sectionTitle__en{
    font-size: 1.6rem;
    margin-top: 10px;
}
.footerContactSec .contact__text{
    margin-top: 30px;
    font-size: 1.4rem;
    line-height: 1.8;
}
.footerContactSec .tellGroup{
    text-align: right;
}
.footerContactSec .contact__tel-number{
    font-size: 4rem;
    font-weight: 900;
}
.footerContactSec .contact__tel-number .min{
    font-size: 3rem;
}
.footerContactSec .contact__time{
    margin-top: 10px;
    font-weight: 900;
}
.footerContactSec .contact__button{
    display: block;
    color: var(--watabegreen);
    text-align: center;
    font-size: 1.6rem;
    font-weight:900;
    text-align: center;

    padding: 32px 22px;
    background-color: #FFFFFF;
    border-radius: 8px;
    margin-top: 32px;
}
@media screen and ( max-width:767px) {
    .footerContactSec{
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    .footerContactSec .tellGroup{
        text-align: center;
    }
    .footerLinkSec {
        flex-direction: column;
        gap: 20px;
    }
}


/*  */
.pageContentArea{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;

    font-size: 1.6rem;
    line-height: 1.8;
}
.pageHeader{
    width: 100%;
    height: 360px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #222222;
    gap: 20px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.pageHeader.business{
    background-image: url(../image/pageimg_business.jpg);
}
.pageHeader.strength{
    background-image: url(../image/pageimg_strength.jpg);
}
.pageHeader.company{
    background-image: url(../image/pageimg_company.jpg);
}
.pageHeader.recruit{
    background-image: url(../image/pageimg_recruit.jpg);
}
.pageTitle{
    font-size: 4.2rem;
    font-weight: 800;
    color: #FFFFFF;
}
.pageTitle__en{
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--watabelightgreen);
}
.imgWrapper{
    padding: 40px 0 80px;
}
@media screen and ( max-width:767px) {
    .pageHeader{
    height: 260px;
    }
    .pageTitle{
    font-size: 3.2rem;
    }
}



/*  */
.businnessProductSec{
    padding-top: 80px;
}
.businnessProductSec .sectionTitleGroup{
    text-align: center;
}
.businnessProductSec .sectionTitleGroup .sectionTitle{
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--watabegreen);
}
.businnessProductSec .sectionTitleGroup .sectionTitle__en{
    font-size: 1.6rem;
    font-weight: 800;
    margin-top: 0px;
}
.productUnit {
    margin-top: 40px;
    border-top: #eeeeee 1px solid;
    padding-top: 40px;
}
.productUnit.imglayout{
    display: flex;
    justify-content: flex-start;
    gap: 40px;
}
.productUnit.imglayout .textGroup{
    width: 50%;
    flex: 1;
}
.productUnit.imglayout .picWrapper{
    width: 50%;
}
.productUnit:nth-child(1) {
    margin-top: 0px;
    border-top: #eeeeee 0px solid;
    padding-top: 0px;
}
.productUnit .unitHeader{
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--watabegreen);
}
.productUnit .unitHeader .num{
    font-size: 5rem;
    display: inline-block;
    margin-right: 10px;
    color: #DADADA;
}
.productUnit .imgCaption{
    margin-bottom: -20px;
    font-weight: 800;
}
.productUnit .prcopy{
    text-align: center;
    font-size: 1.8rem;
    font-weight: 800;
}
.productUnit .boxGreen{
    width: 100%;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--watabegreen);
    background-color:#E7F1E4;
    padding: 10px 20px;
    text-align: center;
    margin-top: 20px;
}
.torikumiPoint{
    margin-top: 82px;
    padding: 20px;
    border: var(--watabelightgreen) 1px solid;
}
.productUnit .bottomImg{
    margin-top: 24px;
    display: block;
}
@media screen and ( max-width:767px) {
.productUnit.imglayout{
    flex-direction: column;
}
.productUnit.imglayout .textGroup{
    width: 100%;
}
.productUnit.imglayout .picWrapper{
    width: 100%;
}
}





.businnessTokuizaiSec{
    padding-bottom: 80px;
}
.businnessTokuizaiSec .sectionTitleGroup{
    text-align: center;
    margin-bottom: 60px;
}
.businnessTokuizaiSec .sectionTitleGroup .sectionTitle{
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--watabegreen);
}
.businnessTokuizaiSec ul{
    display: flex;
    justify-content: center;
    gap: 10px;
}
.businnessTokuizaiSec ul li{
    padding: 8px 20px;
    background-color: #E7F1E4;
    font-size: 1.6rem;
    font-weight: 800;
    color: #000000;
    border-radius: 200px;
}
.businnessTokuizaiSec ul li.none{
    background-color: transparent;
}
@media screen and ( max-width:767px) {
.businnessTokuizaiSec ul{
    flex-direction: column;
}
}

.businnessHoyuukikiSec{
    padding-bottom: 80px;
}
.businnessHoyuukikiSec .sectionTitleGroup{
    text-align: center;
    margin-bottom: 60px;
}
.businnessHoyuukikiSec .sectionTitleGroup .sectionTitle{
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--watabegreen);
}
.businnessHoyuukikiSec table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 40px;
}
.businnessHoyuukikiSec table tbody tr:nth-child(odd){
    background-color: #eeeeee;
}
.businnessHoyuukikiSec table thead{
    text-align: center;
    color: var(--watabegreen);
}

.strengthPageDiscription{
    width: 100%;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--watabegreen);
    background-color:#E7F1E4;
    padding: 10px 0px;
    text-align: center;
    margin-top: 20px;
}
.strengthKoumokuSec {
    margin-top: 20px;
    padding-top: 60px;
    padding-bottom: 120px;
}
.strengthKoumokuSec:nth-child(1) {
    margin-top: 0px;
    border-top: #eeeeee 0px solid;
    padding-top: 0px;
}
.strengthKoumokuSec .unitHeader{
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--watabegreen);
}
.strengthKoumokuSec .unitHeader .num{
    font-size: 5rem;
    display: inline-block;
    margin-right: 10px;
    color: #DADADA;
}




.companyRinenSec{
    width: 100%;
    padding: 0 0px 80px;

    text-align: center;
    background-image: url(../image/companyrinenbg.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center top;
}
.companyRinenSec .sectionTitle{
    font-size: 2.8rem;
    color: var(--watabegreen);
    font-weight: 800;
}
.companyRinenSec .rinen{
    font-size: 3.2rem;
    padding: 64px 0;
    font-weight: 800;
}
.keieihoushinDescription{
    font-size: 1.8rem;
    margin-top: 42px;
}
.companyRinenSec .companyImg{
    margin-top: 62px;
}

.syazeSec{
    width: 100%;
    padding: 40px 0px 80px;
    text-align: left;  
    background-color: #FFFFFF;
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
}
.syazeSec .inner{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.syazeSec .sectionTitle{
    font-size: 2.8rem;
    color: #333333;
    font-weight: 800;
}
.syazeSec .inner{
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.syazeSec .syazetext{
    margin-top: 42px;
    color: var(--watabegreen);
    font-size: 3.2rem;
    font-weight: 800;
}
.companyInfoTable{
    width: 100%;
    margin-top: 42px;
    border-collapse: collapse;

    font-size: 1.4rem;
    background-color: #FFFFFF;
}

.companyInfoTable tr:nth-child(odd){
    background-color: #f5f5f5;
}
.companyInfoTable th,
.companyInfoTable td{
    padding: 8px 12px;
}
.companyInfoTable th{
    color: var(--watabegreen);
}
.syazeSec .rightBox{
    text-align: center;

}
@media screen and ( max-width:767px) {
    .syazeSec .inner{
        flex-direction: column;
    }
}


.rejiriSec{
    width: 100%;
    padding: 42px 20px;
}
.rejiriSec .inner{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}
.rejiriSec .sectionTitle{
    font-size: 2.8rem;
    font-weight: 800;
}
.rejiriSec .description{
    font-size: 1.4rem;
    line-height: 1.8;
    margin-top: 24px;
}
.rejiriSec .inner .leftBox{
    flex: 1;
}
.rejiriSec .inner .rightBox{
    width: 158px;
}
@media screen and ( max-width:767px) {
    .rejiriSec .inner{
        flex-direction: column;
    }
}


.historySec{
    width: 100%;
    padding: 80px 0px 80px;
    text-align: left;
    background-color: #FFFFFF;
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
}
.historySec .inner{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}
.historySec .sectionTitle{
    font-size: 2.8rem;
    color: var(--watabegreen);
    font-weight: 800;
}
.historyDlTable{
    width: 100%;
    max-width: 800px;
    margin-top: 48px;
    text-align: left;
    font-size: 1.6rem;
    font-weight: 400;
    color: #333333;
}
.historyDlTable .row{
    display: flex;
    justify-content: flex-start;
    padding: 4px;
}
.historyDlTable dt{
    color: var(--watabegreen);
    font-weight: 800;
    min-width: 6em;
}







.staffInterviewSec{
    width: 100%;
    padding: 80px 0px 80px;
    text-align: center;
}
.staffInterviewSec .inner{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.staffInterviewSec .sectionTitle{
    font-size: 2.8rem;
    color: var(--watabegreen);
    font-weight: 800;
}

.staffInterviewSec .interviewUnit{
    margin-top: 60px;
}
.staffInterviewSec .interviewUnit .interviewHeader{
    text-align: left;
    font-size: 5.2rem;
    line-height: 1.2;
    font-weight: 700;
    color: #cccccc;
}
.interviewVPr{
    display: flex;
    justify-content: space-between;
    gap: 40px;
    text-align: left;
    align-items: center;
    padding: 0px 0 20px;
}
.interviewCopy{
    font-size: 3.2rem;
    font-weight: 800;
}
.interviewPosition{
    font-size: 1.8rem;
    color: var(--watabegreen);
    font-weight: 700;
    margin-top: 32px;
}
.interviewPosition .min{
    font-size: 1.2rem;
    display: inline-block;
    margin-right: .2em;
    margin-left: .2em;
}
.interviewContents{
    padding: 20px 0;
}
.interviewContents .groupTitle{
    background-color: var(--watabegreen);
    color: #FFFFFF;
    font-size: 1.6rem;
    width: 100%;
    padding: 4px 8px;
    text-align: left;
}
.interviewText{
    padding: 12px 0;
    text-align: left;
}
@media screen and ( max-width:767px) {
    .interviewVPr{
        flex-direction: column;
        gap: 20px;
    }
    .interviewPosition{
        text-align: center;
    }
}



.youkouSec{
    width: 100%;
    padding: 80px 0px 80px;
    text-align: center;
}
.youkouSec .inner{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.youkouSec .sectionTitle{
    font-size: 2.8rem;
    color: var(--watabegreen);
    font-weight: 800;
}

.youkouUnit {
    padding: 42px 0;
}
.youkouUnit .groupTitle{
    font-size: 2.2rem;
    color: #333333;
    font-weight: 800;
}
.youkouTable{
    width: 100%;
    text-align: left;
    margin-top: 42px;
    border-collapse: collapse;
    background-color: #f5f5f5;
}
.youkouTable tr:nth-child(odd){
    background-color: #FFFFFF;
}
.youkouTable th,
.youkouTable td{
    font-size: 1.6rem;
    line-height: 1.8;
    font-weight: 400;
    padding: 8px 12px;

    /* border-bottom: #cccccc 1px solid; */
}
.youkouTable th{
    width: 200px;
    font-weight: 800;
}



.rflowSec{
    width: 100%;
    padding: 80px 0px 80px;
    text-align: left;
    background-color: var(--watabegreen);
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
}
.rflowSec .inner{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}
.rflowSec .sectionTitle{
    font-size: 2.8rem;
    color: #FFFFFF;
    font-weight: 800;
}
.rflowSec dl{
    width: 400px;
    margin: 42px auto 0;

    font-size: 2.8rem;
    font-weight: 800;
    color: #FFFFFF;
}
.rflowSec dl .row{
    display: flex;
    gap: 20px;
}
.rflowSec dl dt{
    font-weight: 700;
    font-size: 1.4rem;
}
.rflowSec dl dt .num{
    display: inline-block;
    margin-left: .2em;
    font-weight: 700;
    font-size: 2.8rem;
}

















/*  */
.topLargeLinkSection{
    display: flex;
    justify-content: center;
    gap: 0;
    align-items: stretch;
}
.topLargeLinkSection a{
    width: 50%;
    text-align: center;
    padding: 10px;
}
.topLargeLinkSection a .inner{
    width: 100%;
    height: 100%;
    padding: 40px 0;
    border: rgba(255,255,255,0.2) 1px solid;

    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.topLargeLinkSection a.leftBoxUnit{
    background-image: url(../image/toplargelinkbg_tech.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    transition: all 0.5s ease 0s;
}
.topLargeLinkSection a.rightBoxUnit{
    background-image: url(../image/toplargelinkbg_faci.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    transition: all 0.5s ease 0s;
}
.topLargeLinkSection a.leftBoxUnit:hover,
.topLargeLinkSection a.rightBoxUnit:hover{
    background-size: 110% auto;
}
.topLargeLinkSection .subject{
    color: #FFFFFF;
    font-weight: 700;
    font-size: 2.4rem;
    color: #F2CF1F;
}
.topLargeLinkSection .subject .yomi{
    display: block;
    margin-top: 20px;
    font-size: 1.8rem;
    color: #FFFFFF;
}
@media screen and ( max-width:1300px) {
    .topLargeLinkSection a.leftBoxUnit,
    .topLargeLinkSection a.rightBoxUnit{
        background-size: auto 100%;
    }
    .topLargeLinkSection a.leftBoxUnit:hover,
    .topLargeLinkSection a.rightBoxUnit:hover{
        background-size: auto 110%;
    }
}
@media screen and ( max-width:767px) {
    .topLargeLinkSection{
        flex-direction: column;
        flex-wrap: wrap;
    }
    .topLargeLinkSection a .inner{
        padding: 20px 0;
        min-height: 100vw;
    }
    .topLargeLinkSection .label{
        width: 100%;
        max-width: 180px;
    }
    .topLargeLinkSection a{
        width: 100%;
        text-align: center;
        padding: 10px;
    }
}
















/*  */
.footerSection{
    width: 100%;
    padding: 0 0px;
    background-color: #FFFFFF;
    color: #001029;
    font-size: 1.2rem;
    line-height: 1.6;
}
.footerSection .cHeader{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 10px 20px;
    border-bottom: #CCC 1px solid;
}
.footerSection .inner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 10px 160px;

    display: flex;
    justify-content: space-between;
    gap: 60px;
}

.footerSection .leftGroup{
}
.footerSection .rightGroup .footerNavi{
    width: 100%;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px 40px;
}
.footerSection .rightGroup{
}

.footerSection .copyright{
    width: 100%;
    height: 50px;
    margin: 0 auto;
    padding: 0px 0;
    text-align: center;
    font-size: 1.2rem;
    line-height: 50px;
    color: #FFFFFF;
    background-color: #003591;
}

@media screen and (max-width:767px) {
    .footerSection{
        border-top: #F2CF1F 16px solid;
    }
    .footerSection .inner{
        padding: 60px 20px 80px;
    
        display: flex;
        justify-content: space-between;
        flex-direction: column-reverse;
        gap: 60px;

        background-size: 90%;
    }
    .footerSection .inner .leftGroup{
        /* text-align: center; */
    }
}





/* 個人情報保護方針 */
.ppSec{
    padding-top: 80px;
}
.ppSec .sectionTitle{
    font-size: 2.8rem;
    font-weight: 800;
    text-align: center;
    color: var(--watabegreen);
    margin-bottom: 42px;
}
.ppSec .groupTitle{
    margin-top: 30px;
    font-weight: 800;
}



/* お問合せ */
.hissu{
    font-size: 1.1rem;
    color: var(--watabegreen);
    display: inline-block;
    margin-left: 1em;
}