// Scss Document



//色設定
$blk: #000000;
$wht: #FFFFFF;
$ivo: #FBF8F7;
$lblu: #F4F5FF;
$sax: #B5C7FF;
$grn: #51BEA5;
$lgrn: #90BE51;
$vio: #3B4491;
$lvio: #515DBE;
$red: #B94E4E;
$dred: #AC5451;
$aozm: #3C3A48;
$daozm: #3C3A49;
$gry: #707070;
$lgry: #CECECE;
$egrn: #51BEA5;
$ind: #5085BC;


//フォント設定
@font-face {
    font-family: 'YuGoth';
    src: url("../../font/YuGothL.ttc") format('opentype');
    font-weight: 300;
    font-style: normal;
} 
@font-face {
    font-family: 'YuGoth';
    src: url("../../font/YuGothR.ttc") format('opentype');
    font-weight: 400;
    font-style: normal;
} 
@font-face {
    font-family: 'YuGoth';
    src: url("../../font/YuGothM.ttc") format('opentype');
    font-weight: 500;
    font-style: normal;
} 
@font-face {
    font-family: 'YuGoth';
    src: url("../../font/YuGothB.ttc") format('opentype');
    font-weight: 600;
    font-style: normal;
} 
@font-face {
    font-family: 'Yumin';
    src: url("../../font/yumindb.ttf") format('opentype');
    font-weight: 600;
    font-style: normal;
} 


a,
p,
span,
li,
dt,dd,
h1,h2,h3,h4,h5,
th,td,
label{
    font-family: 'YuGoth';
    font-style: normal;
    color: $daozm;
    line-height: 1.5em;
}



//基本設定
a,span{
    text-decoration: none;
    transform: 0.5;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

a{
    opacity: 1;
    
}

a:hover{
    opacity: 0.8;
}

a.totop{
    display: block;
    position: fixed;
    right: 3%;
    bottom: 30px;
    width: 70px;
    height: auto;
}



.pcbr,
.spbr,
#pc_header{
    display: none;
}

/*********************************
ここから全ページ共通
*********************************/
@mixin space-between{
    display: flex;
    justify-content: space-between;
}



.sp_header{
    width: 100%;
    height: 85px;
    position: fixed;
    top: 0;
    z-index: 999;
    background: $wht;
}


.header_flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 0 0 0 3%;
    a.logo{
        display: block;
        width: auto;
        max-width: 391px;
        height: auto;
        object-fit: contain;
        margin: 19px 0;
        img{
            width: 100%;
            height: auto;
            object-fit: contain;
        }
    }
}


.drawer{
 flex-direction: row;
}


/*ここからナビゲーション*/

.navbar_toggle{
    z-index: 9999;
    padding: 0;
    background: $vio;
    width: 85px;
    height: 85px;
    display: flex;
    justify-content: center;
    align-items: center;
    p{
        font-size: clamp(11px, 0.78vw, 15px);
        font-weight: 600;
        color: $wht;
        margin-bottom: 5px;
        text-align: center;
    }
    p.close{
        display: none;
    }
    div.hamburger{
        span {
            position: relative;
            display: block;
            height: 3px;
            width: 40px;
            background: #FFF;
            -webkit-transition: ease .5s;
            transition: ease .5s;
        }
    }
}


.navbar_toggle_icon:nth-child(1) {
    top: 0;
    margin-left: auto;
    margin-right: auto;
}
.navbar_toggle_icon:nth-child(2) {
    margin: 7px auto;
}
.navbar_toggle_icon:nth-child(3) {
    top: 0;
    margin-left: auto;
    margin-right: auto;

}


/*OPEN時の動き*/
.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
 top: 11px;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}

.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 opacity: 0;
}

.navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
 top: -9px;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}

div.navbar_toggle.open{
    p.open{
        display: none;
    }
    p.close{
        display: block;
    }
}




/*メニュー中身*/
ul.dwr_box {
}

.sp_menu.open, .dwr_main_menu:checked + .dwr_sub_menu {
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    overflow-scrolling: touch;
    height: 100%;
    width: 100%;
}

.sp_menu{
    padding: 0 0 100px 0;
    display: block;
    background:rgba(59,68,145,0.9);
     -webkit-transform: translateX(150%);
    transform: translateX(150%);
     -webkit-transition:ease .9s;
    transition:ease .9s;
    z-index: 1000;
    width: 93%;
    margin: 0 auto 0 auto;
    ul{
        li{
            width: 100%;
            padding: 33px 0 33px 0;
            text-align: left;
            margin: 0 auto;
            border-bottom: 1px solid $wht;
            position: relative;
            a,
            label{
                display: block;
                width: 100%;
                font-size: clamp(38px, 2.5vw, 48px);
                color: $wht;
                font-weight: 600;
                padding: 0 0 0 6%;
                span{
                    font-size: clamp(38px, 2.5vw, 48px);
                    color: $wht;
                    font-weight: 500;
                    vertical-align: middle;
                    margin-right: 3%;
                }
                &::before{
                    display:  none;
                }
            }
            &::after{
                display: inline-block;
                font-family: "Material Symbols Outlined";
                content: "\e5cc";
                color: $wht;
                font-weight: 600;
                font-size: clamp(38px, 2.5vw, 48px);
                position: absolute;
                top: 50%;
                right: 6%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
            }
        }
        li.dwr_main_menu{
            &::after{
                display: inline-block;
                font-family: "Material Symbols Outlined";
                content: "\e145";
                color: $wht;
                font-weight: 600;
                font-size: clamp(38px, 2.5vw, 48px);
                position: absolute;
                top: 50%;
                right: 6%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
            }
        }
        li.window{
            &::after{
                display: none;
            }
            a{
                display: block;
                font-size: clamp(26px, 1.87vw, 36px);
                font-weight: 500;
                margin-bottom: 50px;
                line-height: 1;
                span{
                    font-size: clamp(26px, 1.87vw, 36px);
                    font-weight: 500;
                    color: $wht;
                    vertical-align: bottom;
                }
                &:last-child{
                    margin-bottom: 0;
                }
            }
        }
        li.contact{
            padding: 90px 0;
            text-align: center;
            border-bottom: none;
            &::after{
                display: none;
            }
            p{
                font-size: clamp(26px, 1.87vw, 36px);
                font-weight: 600;
                color: $wht;
            }
            a{
                display: block;
                font-size: clamp(44px, 3.3vw, 64px);
                color: $wht;
                font-weight: 600;
                letter-spacing: 0.1em;
                margin-bottom: 93px;
                span{
                    font-size: clamp(44px, 3.3vw, 64px);
                    color: $wht;
                    font-weight: 500;
                    vertical-align: middle;
                }
            }
            p.close{
                width: 85%;
                margin: 0 auto;
                background: $wht;
                border-radius: 8px;
                padding: 16px 0px;
                text-align: center;
                color: $vio;
                font-weight: 600;
                font-size: clamp(26px, 1.87vw, 36px);
                span{
                    color: $vio;
                    font-weight: 600;
                    font-size: clamp(26px, 1.87vw, 36px);
                    margin-right: 3%;
                    vertical-align: middle;
                }
            }
        }
    }
}

/**** ハンバーガー開いた時のメニュー ***/
.sp_menu.open {
    display: block;
     -webkit-transform:translateX(0);
     transform:translateX(0);
    width: 93%;
    margin: 0 auto 0 auto;
    right: 0;
}

ul.dwr_sub_menu{
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
    margin: 0;
    li{
        width: 100%;
        padding: 17px 0 17px 6%;
        margin: 0;
        border: none;
        &::before{
            display: inline-block;
            font-family: "Material Symbols Outlined";
            content: "\e5cc";
            color: $wht;
            font-weight: 600;
            font-size: clamp(38px, 2.5vw, 48px);
            position: absolute;
            top: 50%;
            left: 6%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
        }
        &::after{
            display: none;
        }
        &:hover{
            background:rgba(0,0,0,0.3);
        }
        a{
            display: block;
            text-align: left;
            color: $wht;
            font-size: clamp(26px, 1.87vw, 36px);
        }
    }
}

/**** 会社案内メニュー　開いた時 ***/
.sp_menu ul li.dwr_main_menu.open{
    background:rgba(0,0,0,0.3);
    border-bottom: none;
    &::after{
        display: inline-block;
        font-family: "Material Symbols Outlined";
        content: "\f108";
        color: $wht;
        font-weight: 600;
        font-size: clamp(38px, 2.5vw, 48px);
        position: absolute;
        top: 50%;
        right: 6%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }
}

/**** 会社案内メニュー　開いた時の下層メニュー ***/
ul.dwr_sub_menu.open{
    height: auto;
    opacity: 1;
    visibility: visible;
    padding: 0;
    border-bottom: 1px solid $wht;
}

/****黒背景***/
.black-bg {
  position: fixed;
  left: 0;
  top: 85px;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}

.black-bg.open {
  opacity: .8;
  visibility: visible;
}

.dwr_box input{
    display: none;
}


p.txt_l{
    font-size: clamp(20px, 1.1vw, 22px);
    text-align: left;
}

p.txt_c{
    font-size: clamp(20px, 1.1vw, 22px);
    text-align: center;
}

p.txt_r{
    font-size: clamp(20px, 1.1vw, 22px);
    text-align: right;
}

p.txt_c_b{
    font-size: clamp(20px, 1.1vw, 22px);
    font-weight: 600;
    text-align: center;
}



.wrap{
    overflow: hidden;
}

/*********************************
ここからTOP
********************************
.center { margin: 0 0 50px;}
.center img { width: 100%; height: auto;}
.center .slick-next { right: 20px; z-index: 99;}
.center .slick-prev { left: 15px; z-index: 100;}
*/

div.kv{
    width: 100%;
    position: relative;
    div.kv_content{
        width: 90%;
        height: auto;
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);       
        p.catch{
            display: inline-block;
            padding: 0 3%;
            font-size: clamp(29px, 2vw, 39px);
            font-family: 'Yumin';
            background:rgba(255,255,255,0.8);
            margin-bottom: 30px;
            text-shadow: 2px 1px 0px $wht;
            text-align: center;
            span{
                font-size: clamp(38px, 2.5vw, 48px);
                font-family: 'Yumin';
                text-shadow: 2px 1px 0px $wht;
            }
        }
        div.link{
            width: 100%;
            @include space-between;
            a{
                display: block;
                width: 48%;
                background: $wht;
                border-radius: 6px;
                padding: 24px 3%;
                border: 2px solid $red;
                text-align: center;
                color: $red;
                font-size: clamp(18px, 1.35vw, 26px);
                font-weight: 600;
                span{
                    font-size: clamp(24px, 1.7vw, 34px);
                    font-weight: 600;
                    color: $red;
                }
                span.material-symbols-outlined{
                    font-size: clamp(18px, 1.35vw, 26px);
                    margin-right: 5px;
                }
            }
            a.red{
                background: $red;
                color: $wht;
                span{
                    color: $wht;
                }
            }
        }
    }
}

.kv_sp,
.sp_grd,
.link_sp{
    display: none;
}

.center{
    background: $lblu;
    .sliderArea {
        width: 100%;
        margin: 0 auto;
        padding: 0 25px;
    }
    .slick-slider {
        
    }
    .slick-prev, .slick-next {
        z-index: 1;
    }
    .slick-slide {
        transition: all ease-in-out .3s;
        img{
            width: 100%;
            height: 900px;
            object-fit: cover;
            object-position: right 25% top 0;
        }
    }
    .slick-active {
        filter: brightness(1);
    }

    .slick-current {
        opacity: 1;
    }
    .thumb {
        margin: 20px 0 0;
    }
    .thumb .slick-slide {
        cursor: pointer;
    }
    .thumb .slick-slide:hover {
        opacity: .7;
    }
}


.top_cts{
    width: 100%;
    padding: 0;
    .inner{
        width: 90%;
        max-width: 1080px;
        margin: 0 auto;
    }
    h2{
        font-size: clamp(34px, 1.87vw, 36px);
        font-weight: 600;
        margin-bottom: 50px;
        letter-spacing: 0.05em;
    }
}

div.top_about{
    width: 100%;
    padding: 70px 0px;
    background: transparent linear-gradient(207deg, var(---3b4491_main) 0%, var(---3b4491_main) 64%, var(---515dbe_sub) 64%, var(---515dbe_sub) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(207deg, #3B4491 0%, #3B4491 64%, #515DBE 64%, #515DBE 100%) 0% 0% no-repeat padding-box;
    text-align: center;
    h2{
        color: $wht;
    }
    p.txt_c{
        font-weight: 500;
        letter-spacing: 0.1em;
        color: $wht;
        margin-bottom: 40px;
        span{
            font-weight: 600;
            color: $wht;
        }
    }
    ul.wht_box{
        width: 100%;
        max-width: 771px;
        background:rgba(255,255,255,0.2);
        padding: 30px 2%;
        margin: 0 auto 40px auto;
        li{
            width: 100%;
            text-align: left;
            font-size: clamp(20px, 1.1vw, 22px);
            color: $wht;
            font-weight: 500;
            letter-spacing: 0.1em;
        }
    }
    p.txt_c_b{
        font-weight: 600;
        color: $wht;
        letter-spacing: 0.1em;
    }
}



div.top_point{
    width: 100%;
    padding: 70px 0;
    background-image: url("../../img/top_bg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    text-align: center;
    background-color: $lblu;
    h2{
        color: $vio;
    }
    ul.point{
        width: 100%;
        max-width: 771px;
        margin: 0 auto 40px auto;
        @include space-between;
        flex-wrap: wrap;
        grid-row-gap: 22px;
        li{
            width: 50%;
            position: relative;
            &::before{
                display: inline-block;
                font-family: "Material Symbols Outlined";
                content: "\e876";
                color: $red;
                font-weight: 600;
                font-size: clamp(20px, 1.1vw, 22px);
                vertical-align: middle;
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
            }
            p{
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 600;
                text-decoration: underline;
                text-align: left;
                margin-left: 7%;
            }
        }
    }
    p.txt_c{
        font-weight: 500;
        color: $daozm;
    }
}


div.top_contact{
    width: 100%;
    background: $lvio;
    padding: 62px 0px;
    ul.num{
        width: 100%;
        max-width: 1080px;
        margin: 0 auto 30px auto;
        @include space-between;
        align-items: center;
        li{
            width: 50%;
            text-align: center;
            p{
                font-size: clamp(16px, 1.1vw, 20px);
                color: $wht;
                font-weight: 600;
                span{
                    font-size: clamp(14px, 0.83vw, 16px);
                    color: $wht;
                    font-weight: 600;
                }
            }
            a,p.fax{
                font-size: clamp(38px, 2.5vw, 48px);
                color: $wht;
                font-weight: 600;
                &::before{
                    display: inline-block;
                    font-family: "Material Symbols Outlined";
                    color: $wht;
                    font-size: clamp(38px, 2.5vw, 48px);
                    margin-right: 20px;
                }
            }
            a.tel::before{
                content: "\e61d";
            }
            p.fax::before{
                content: "\ead8";
            }
        }
    }
    p.txt_l{
        width: 90%;
        max-width: 929px;
        margin: 0 auto;
        font-size: clamp(14px, 0.9vw, 18px);
        color: $wht;
        font-weight: 500;
        span{
            font-size: clamp(14px, 0.9vw, 18px);
            color: $wht;
            font-weight: 600;
        }
    }
}

ul.num li+ li {
  border-left: 1px solid $wht;
}

.top_mail{
    width: 100%;
    padding: 60px 0px;
    background: $lblu;
    .flex{
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        @include space-between;
        a{
            width: 40%;
            background: $vio;
            padding: 10px 0;
            border-radius: 5px;
            text-align: center;
            color: $wht;
            font-size: clamp(20px, 1.1vw, 22px);
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            span{
                color: $wht;
                margin-right: 3%;
            }
            &:hover{
                background: $red;
                opacity: 1;
            }
        }
        p.txt_l{
            width: 56%;
            font-size: clamp(14px, 0.9vw, 18px);
            font-weight: 500;
            span{
                font-size: clamp(14px, 0.9vw, 18px);
                font-weight: 800;
                color: $red;
            }
        }
    }
}






/*********************************
フッター
*********************************/

footer{
    width: 100%;
    background: transparent linear-gradient(195deg, var(---3b4491_main) 0%, var(---3b4491_main) 64%, var(---515dbe_sub) 64%, var(---515dbe_sub) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(195deg, #3B4491 0%, #3B4491 64%, #515DBE 64%, #515DBE 100%) 0% 0% no-repeat padding-box;
    padding: 64px 0 18px 0;
    div.inner{
        width: 90%;
        max-width: 870px;
        margin: 0 auto 160px auto;
        @include space-between;
        a.co_name{
            font-size: clamp(20px, 1.1vw, 22px);
            font-weight: 600;
            color: $wht;
        }
        ul.menu{
            width: 56%;
            max-width: 492px;
            @include space-between;
            flex-wrap: wrap;
            grid-row-gap: 23px;
            li{
                width: 50%;
                a{
                    font-size: clamp(16px, 1.1vw, 20px);
                    font-weight: 600;
                    color: $wht;
                    white-space: nowrap;
                    span{
                        font-size: clamp(16px, 1.1vw, 20px);
                        color: $wht;
                        margin-right: 5px;
                        vertical-align: middle;
                    }
                    &:hover{
                        border-bottom: 1px solid $wht;
                    }
                }
                a.link{
                    font-weight: 500;
                }
            }
        }
    }
    p.copy{
        font-size: clamp(14px, 0.83vw, 16px);
        font-weight: 500;
        color: $wht;
        text-align: center;
    }
}


.sp_footer{
    display: none;
}



/************************
下層共通
************************/
div.page_content{
    padding: 17px 0 100px 0;
    background: $lblu;
    div.inner{
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        h2{
            font-size: clamp(30px, 1.87vw, 36px);
            font-weight: 600;
            color: $vio;
            text-align: center;
            margin-bottom: 40px;
        }
        h3{
            font-size: clamp(25px, 1.56vw, 30px);
            color: $lvio;
            font-weight: 600;
            margin-bottom: 40px;
            text-align: center;
        }
        h3.vio{
            font-size: clamp(30px, 1.87vw, 36px);
            color: $vio;
            span{
                display: block;
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 600;
                color: $vio;
            }
        }
        h3.big{
            font-size: clamp(30px, 1.87vw, 36px);
        }
        div.whtbox{
            width: 100%;
            max-width: 1080px;
            margin: 0 auto 54px auto;
            border-top: 20px solid $vio;
            background: $wht;
            padding: 50px 5% 70px 5%;
        }
        div.kado{
            border-radius: 0;
        }
    }
}

div.pb0{
    padding-bottom: 0;
}

ol.breadcrumbs{
    display:flex;
    white-space: nowrap;
    margin-bottom: 70px;
    li{
      list-style:none;
      padding-right:30px;
        font-size: clamp(14px, 0.9vw, 18px);
        font-weight: 500;
        &:not(:last-child) {
         position:relative;
         padding-right: 30px;
        }
        &:not(:last-child) ::after{
          content: ">";
          display: block;
          position: absolute;
          width: 15px;
          height: 15px;
          top: 0px;
          right: 7px;
        }
        a{
            cursor:pointer;
            color: $vio;
            font-size: clamp(14px, 0.9vw, 18px);
            font-weight: 500;
            border-bottom: 1px solid $vio;
            &:hover{
              opacity: 0.7;
            } 
        }
    }
}

div.page_title{
    width: 100%;
    height: 320px;
    background-size: cover;
    position: relative;
    h1{
        display: inline-block;
        padding: 19px 5% 28px 5%;
        background:rgba(255,255,255,0.8);
        font-size: clamp(40px, 2.39vw, 46px);
        font-weight: 600;
        margin-bottom: 11px;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 0%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        span{
            display: block;
            font-size: clamp(16px, 0.9vw, 18px);
            font-weight: 500;
            letter-spacing: 0.1em;
        }
    }
}

div.company_title{
    background: url("../../img/company/title.png");
    border-bottom: 10px solid $lvio;
    h1{
        color: $vio;
        span{
            color: $vio;
        }
    }
}

div.contact_title{
    background: url("../../img/contact/title.png");
    border-bottom: 10px solid $lvio;
    background-position: right;
    h1{
        color: $vio;
        span{
            color: $vio;
        }
    }
}

div.staff_title{
    background: url("../../img/staff/title.png");
    border-bottom: 10px solid $egrn;
    background-position: right 20% top 0%;
    h1{
        color: $egrn;
        span{
            color: $egrn;
        }
    }
}

div.btn_box{
    width: 100%;
    @include space-between;
    flex-wrap: wrap;
    grid-row-gap: 24px;
    margin-bottom: 93px;
    &::after{
        content: '';
        width: 48%;
        display: block;
    }
    a{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48%;
        padding: 15px 0;
        text-align: center;
        border: 1px solid $vio;
        color: $vio;
        border-radius: 6px;
        span{
            font-size: clamp(18px, 1.1vw, 22px);
            font-weight: 500;
            color: $vio;
            position: relative;
            &::before{
                display: block;
                font-family: "Material Symbols Outlined";
                content: "\e5cc";
                color: $vio;
                font-size: clamp(18px, 1.1vw, 22px);
                position: absolute;
                top: 50%;
                left: -30px;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
            }
        }
        &:hover{
            background: $vio;
            color: $wht;
            opacity: 1;
            span{
                color: $wht;
                &::before{
                    color: $wht;
                }
            }
        }
    }
    a.selected{
        background: $vio;
        color: $wht;
        span{
            color: $wht;
            position: relative;
            &::before{
                content: "\e5cf";
                color: $wht;
            }
        }
    }
}
 

div.btn_box_sp{
    display: none;
}

/************************
求人情報
************************/
div.recruit_box{
    width: 100%;
    div.kv{
        width: 100%;
        background: $lblu;
        background-image: url("../../img/recruit/kv.png");
        background-size: cover;
        background-position: right 80% top 0;
        background-repeat: no-repeat;
        padding: 208px 0 229px 0;
        border-bottom: 10px solid $red;
        position: relative;
        p.catch{
            width: 90%;
            max-width: 650px;
            margin: 0 auto 0 5%;
            font-size: clamp(28px, 1.97vw, 38px);
            font-weight: 600;
            text-shadow: 2px 2px 0px $wht;
            span{
                color: $red;
                font-weight: 600;
            }
        }
    }
}





div.recruit_box div.link_box{
    width: 100%;
    background: transparent linear-gradient(244deg, var(---3b4491_main) 0%, var(---3b4491_main) 64%, var(---515dbe_sub) 64%, var(---515dbe_sub) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(244deg, #3B4491 0%, #3B4491 64%, #515DBE 64%, #515DBE 100%) 0% 0% no-repeat padding-box;
    padding: 40px 0px;
    div.inner{
        width: 90%;
        max-width: 1080px;
        margin: 0 auto;
        @include space-between;
        flex-wrap: wrap;
        grid-row-gap: 20px;
        a{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 85%;
            margin: 0 auto;
            background: $wht;
            border: 2px solid $red;
            padding: 23px 0;
            border-radius: 6px;
            color: $red;
            font-size: clamp(20px, 1.1vw, 22px);
            font-weight: 600;
            span{
                font-size: clamp(23px, 1.30vw, 25px);
                color: $red;
                font-weight: 600;
            }
            span.material-symbols-outlined{
                margin-right: 3%;
            }
        }
        a.red{
            background: $red;
            color: $wht;
            span{
                color: $wht;
            }
            span.material-symbols-outlined{
                font-weight: 400;
            }
        }
    }
}



div.recruit_box .scr_box{
    width: 90%;
    max-width: 780px;
    margin: 0 auto 90px auto;
    @include space-between;
    flex-wrap: wrap;
    grid-row-gap: 30px;
    &::after{
        display: block;
        content: '';
        width: 30%;
    }
    a{
        width: 30%;
        border: 1px solid $vio;
        border-radius: 6px;
        padding: 15px 0;
        text-align: center;
        position: relative;
        span{
            font-size: clamp(18px, 1.1vw, 22px);
            color: $vio;
            margin-right: 10px;
            font-weight: 500;
            &::before{
                display: block;
                font-family: "Material Symbols Outlined";
                content: "\e313";
                color: $vio;
                position: absolute;
                top: 50%;
                left: 5%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                font-size: clamp(30px, 2vw, 40px);
            }
        }
        &:hover{
            background: $vio;
            color: $wht;
            opacity: 1;
            span{
                color: $wht;
                &::before{
                    color: $wht;
                }
            }
        }
    }
}

div.recruit_box{
    section{
        display: none;
    }
}

 
 div.summary{
    p.hashtag{
        display: inline-block;
        width: 32%;
        padding: 3px 0;
        font-size: clamp(14px, 0.9vw, 18px);
        font-weight: 500;
        border: 1px solid $gry;
        margin-right: 1%;
        text-align: center;
        margin-bottom: 34px;
    }
     p.company_name{
        font-size: clamp(16px, 0.9vw, 18px);
        font-weight: 600;
        margin-bottom: 37px;
    }
     p.position{
         font-size: clamp(20px, 1.1vw, 22px);
         font-weight: 600;
         color: $lvio;
         margin-bottom: 50px;
     }
}
   

div.summary div.gry_box{
    width: 100%;
    background: $lblu;
    padding: 30px 5% 57px 5%;
    margin-bottom: 40px;
    h4{
        font-size: clamp(20px, 1.1vw, 22px);
        font-weight: 600;
        color: $red;
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        span{
            color: $red;
            margin-right: 30px;
            font-size: clamp(25px, 1.56vw, 30px);
        }
    }
    p.txt_l{
        font-weight: 500;
    }
}

div.sp_acco{
    .show_more{
        display: none;
    }
}

div.summary table.recruit{
    width: 100%;
    tr{
        border-bottom: 1px solid $lgry;
        th,td{
            font-size: clamp(20px, 1.1vw, 22px);
            vertical-align: middle;
            padding: 30px 0;
            text-align: left;
        }
        th{
            width: 25%;
            color: $lvio;
            font-weight: 600;
        }
        td{
            width: 75%;
            font-weight: 500;
        }
    }
}

div.store table.store{
    width: 100%;
    tr{
        border-bottom: 1px solid $lgry;
        th,td{
            font-size: clamp(20px, 1.1vw, 22px);
            vertical-align: middle;
            padding: 30px 0;
            text-align: left;
        }
        th{
            width: 25%;
            font-weight: 600;
            a{
                display: block;
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 600;
                padding-left: 15%;
                position: relative;
                &::before{
                    display: block;
                    font-family: "Material Symbols Outlined";
                    content: "\e89e";
                    color: $vio;
                    font-size: clamp(20px, 1.1vw, 22px);
                    margin-right: 20px;
                    position: absolute;
                    top: 50%;
                    left: 0%;
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                }
            }
        }
        td{
            width: 75%;
            font-weight: 500;
        }
    }
}


table.occupation{
    width: 90%;
    max-width: 1080px;
    margin: 0 auto 70px auto;
    tr{
        border-bottom: 1px solid $lgry;
        position: relative;
        &::after{
            content: '';
            display: block;
            line-height: 0;
            overflow: hidden;
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 30%;
            border-bottom: 2px solid $vio;
        }
        &:first-child{
            border-top: 1px solid $lgry;
            &::after{
                content: '';
                display: block;
                line-height: 0;
                overflow: hidden;
                position: absolute;
                left: 0;
                top: -1px;
                width: 30%;
                border-top: 2px solid $vio;
            }
        }
        th,td{
            padding: 30px 0;
            font-size: clamp(20px, 1.1vw, 22px);
            vertical-align: middle;
            text-align: left;
        }
        th{
            width: 30%;
            font-weight: 600;
            padding-left: 5%;
            &::before{
                display: block;
                font-family: "Material Symbols Outlined";
                content: "\e873";
                color: $vio;
                font-size: clamp(25px, 1.56vw, 30px);
                margin-right: 20px;
                position: absolute;
                top: 50%;
                left: 0%;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
            }
        }
        td{
            width: 70%;
            font-weight: 500;
            padding-left: 4%;
        }
    }
}


div.recruit_flow{
    width: 100vw;
    padding: 70px 0;
    background: transparent linear-gradient(152deg, var(---3b4491_main) 0%, var(---3b4491_main) 0%, var(---3b4491_main) 64%, var(---515dbe_sub) 64%, var(---515dbe_sub) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(152deg, #3B4491 0%, #3B4491 0%, #3B4491 64%, #515DBE 64%, #515DBE 100%) 0% 0% no-repeat padding-box;
    margin: 0px calc(50% - 50vw) 94px  calc(50% - 50vw);
    div.inner{
        width: 90%;
        max-width: 1080px;
        margin: 0 auto;
        h3{
            color: $wht;
        }
    }
}

div.baloon{
    width: 100%;
    background: $wht;
    padding: 30px 4% 30px 2%;
    margin-bottom: 44px;
    @include space-between;
    align-items: flex-start;
    position: relative;
    &:last-child{
        margin-bottom: 0;
        &:after{
            display: none;
        }
    }
    &::after{
        position: absolute;
        bottom: -24px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        content: '';
        border-width: 25px 34px 0 34px;
        border-style: solid;
        border-color: $wht transparent transparent transparent;
    }
    img{
        width: 20%;
        height: auto;
        object-fit: contain;
    }
    div.right{
        width: 76%;
        h4{
            font-size: clamp(22px, 1.25vw, 24px);
            color: $vio;
            font-weight: 600;
            margin-bottom: 10px;
        }
        p.txt_l{
            font-weight: 500;
            margin-bottom: 20px;
            a{
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 500;
                color: $vio;
                text-decoration: underline;
            }
        }
        div.link{
            display: flex;
            flex-flow: column;
            grid-row-gap: 10px;
            a{
                font-size: clamp(20px, 1.1vw, 22px);
                color: $vio;
                font-weight: 500;
                text-decoration: underline;
                position: relative;
                padding-left: 5%;
                &::before{
                    display: inline-block;
                    font-family: "Material Symbols Outlined";
                    color: $vio;
                    font-size: clamp(20px, 1.1vw, 22px);
                    margin-right: 20px;
                    position: absolute;
                    top: 50%;
                    left: 0%;
                    transform: translateY(-50%);
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                }
            }
            a.exl{
                &::before{
                    content: "\e873";
                }
            }
            a.pdf{
                &::before{
                    content: "\e415";
                }
            }
        }
    }
}


div.benefits{
    table.benefits{
        width: 100%;
        tr{
            border-bottom: 1px solid $lgry;
            position: relative;
            &::after{
                content: '';
                display: block;
                line-height: 0;
                overflow: hidden;
                position: absolute;
                left: 0;
                bottom: -1px;
                width: 25%;
                border-bottom: 2px solid $vio;
            }
            th,td{
                padding: 26px 0;
                text-align: left;
                font-size: clamp(20px, 1.1vw, 22px);
                vertical-align: middle;
            }
            th{
                width: 25%;
                font-weight: 600;
            }
            td{
                width: 75%;
                font-weight: 500;
                padding-left: 3%;
            }
        }
    }
}

div.recruit_box div.vio_box{
    width: 90%;
    max-width: 820px;
    margin: 0 auto 30px auto;
    background: $vio;
    padding: 34px 0;
    p{
        width: 90%;
        max-width: 621px;
        margin: 0 auto;
        font-size: clamp(20px, 1.1vw, 22px);
        font-weight: 500;
        color: $wht;
        span{
            font-size: clamp(25px, 1.56vw, 30px);
            font-weight: 600;
            color: $wht;
        }
    }
}

div.vio_box + div.link{
    width: 90%;
    margin: 0 auto 54px auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    grid-row-gap: 10px;
    a{
        font-size: clamp(20px, 1.1vw, 22px);
        color: $vio;
        font-weight: 500;
        text-decoration: underline;
        position: relative;
        padding-left: 3%;
        &::before{
            display: inline-block;
            font-family: "Material Symbols Outlined";
            color: $vio;
            font-size: clamp(18px, 1.1vw, 20px);
            margin-right: 20px;
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
        }
    }
    a.exl{
        &::before{
            content: "\e873";
        }
    }
    a.pdf{
        &::before{
            content: "\e415";
        }
    }
}

div.recruit_box div.vio_borderbox{
    width: 90%;
    max-width: 820px;
    margin: 0 auto;
    border: 3px solid $lvio;
    padding: 50px 0;
    position: relative;
    h4{
        width: 90%;
        max-width: 446px;
        background: $lblu;
        padding: 10px 0;
        text-align: center;
        font-size: clamp(20px, 1.1vw, 22px);
        font-weight: 600;
        color: $lvio;
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
    p.txt_l{
        width: 90%;
        max-width: 512px;
        margin: 0 auto;
        font-weight: 500;
    }
}


div.norecruit{
    div.whtbox{
        p.txt_c{
            margin-bottom: 52px;
            font-weight: 500;
        }
        p.red_bld{
            font-size: clamp(25px, 1.56vw, 30px);
            color: $red;
            font-weight: 600;
            text-align: center;
        }
    }
    div.scr_box{
        width: 90%;
        max-width: 510px;
        margin: 0 auto 90px auto;
        @include space-between;
        &::after{
            display: block;
            content: '';
            width: 47%;
        }
        a{
            width: 47%;
        }
    }
}





/************************
会社情報
************************/
table.company{
    width: 100%;
    tr{
        border-bottom: 1px solid $lgry;
        position: relative;
        &::after{
            content: '';
            display: block;
            line-height: 0;
            overflow: hidden;
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 30%;
            border-bottom: 2px solid $vio;
        }
        th,td{
            font-size: clamp(20px, 1.1vw, 22px);
            padding: 30px 0;
            text-align: left;
            vertical-align: middle;
        } 
        th{
            width: 30%;
            font-weight: 600;
        }
        td{
            font-weight: 500;
            width: 70%;
            padding-left: 3%;
            a{
                color: $vio;
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 500;
                text-decoration: underline;
            }
        }
    }
}


p.lvio_bld{
    text-align: center;
    margin-bottom: 40px;
    color: $lvio;
    font-size: clamp(20px, 1.1vw, 22px);
    font-weight: 600;
}

div.whtbox iframe{
    width: 100%;
    height: 270px;
}





/************************
労働者派遣事業に関わる情報
************************/
div.info_box{
    p.txt_l{
        font-weight: 500;
        margin-bottom: 57px;
    }
}

table.info{
    width: 100%;
    max-width: 860px;
    margin: 0 auto 100px auto;
    tr{
        th,td{
            font-size: clamp(20px, 1.1vw, 22px);
            font-weight: 500;
            line-height: 2em;
        }
    }
}

@mixin pdf_link{
    font-size: clamp(20px, 1.1vw, 22px);
    color: $vio;
    font-weight: 500;
    text-decoration: underline;
    position: relative;
    padding-left: 5%;
    &::before{
        display: inline-block;
        font-family: "Material Symbols Outlined";
        color: $vio;
        font-size: clamp(20px, 1.25vw, 24px);
        margin-right: 20px;
        position: absolute;
        top: 50%;
        left: 0%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        content: "\e415";
    }
}


div.info_box a.pdf{
    @include pdf_link;
}


div.info_box{
    div.btn_box_sp{
        display: none;
    }
}





/************************
SDGsに関する取組みについて
************************/
div.sdgs_caption{
    width: 100vw;
    padding: 70px 0;
    background: transparent linear-gradient(152deg, var(---3b4491_main) 0%, var(---3b4491_main) 0%, var(---3b4491_main) 64%, var(---515dbe_sub) 64%, var(---515dbe_sub) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(152deg, #3B4491 0%, #3B4491 0%, #3B4491 64%, #515DBE 64%, #515DBE 100%) 0% 0% no-repeat padding-box;
    margin: 0px calc(50% - 50vw);
    p.txt_l{
        width: 90%;
        max-width: 1140px;
        margin: 0 auto;
        font-weight: 500;
        color: $wht;
    }
}


div.wht_over{
    width: 100vw;
    padding: 100px 0 89px 0;
    background: $wht;
    margin: 0px calc(50% - 50vw);
    div.inner{
        width: 90%;
        max-width: 1080px;
        margin: 0 auto;
        img.sdgs{
            display: block;
            width: 100%;
            max-width: 800px;
            margin: 0 auto 142px auto;
        }
    }
}

div.wht_over div.each{
    width: 100%;
    background: $lblu;
    padding: 0 3% 30px 3%;
    margin-bottom: 82px;
    @include space-between;
    align-items: flex-start;
    img{
        display: block;
        width: 18%;
        height: auto;
        object-fit: contain;
        margin-top: -20px;
    }
    ul{
        width: 78%;
        margin-top: 30px;
        li{
            font-size: clamp(20px, 1.1vw, 22px);
            font-weight: 500;
            margin-bottom: 20px;
            display: flex;
            &::before{
                display: block;
                font-family: "Material Symbols Outlined";
                content: "\e876";
                color: $daozm;
                font-size: clamp(20px, 1.1vw, 22px);
                margin-right: 3%;
                font-weight: 600;
            }
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
}







/************************
個人情報に関する方針
************************/
div.pri_box{
    p.txt_l{
        margin-bottom: 40px;
        font-weight: 500;
        a{
            font-weight: 500;
            font-size: clamp(20px, 1.1vw, 22px);
        }
        span{
            font-weight: 600;
            font-size: clamp(20px, 1.1vw, 22px);
        }
    }
    ul.list{
        width: 100%;
        max-width: 870px;
        margin: 0 auto;
        li{
            display: flex;
            grid-column-gap: 1%;
            margin-bottom: 20px;
            p{
                font-weight: 500;
                font-size: clamp(20px, 1.1vw, 22px);
            }
            p.num{
                
            }
        }
    }
    p.txt_r{
        margin-top: 70px;
    }
    dl{
        width: 100%;
        max-width: 860px;
        margin: 0 auto;
        dt{
            font-size: clamp(20px, 1.1vw, 22px);
            font-weight: 600;
        }
        dd{
            font-size: clamp(20px, 1.1vw, 22px);
            font-weight: 500;
            padding-left: 1em;
            margin-bottom: 30px;
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
}







/************************
一般事業主行動計画
************************/
div.gene_box{
    p.txt_l{
        margin-bottom: 60px;
        font-weight: 500;
    }
}


table.gene{
    width: 100%;
    tr{
        border-bottom: 1px solid $lgry;
        position: relative;
        &::after{
            content: '';
            display: block;
            line-height: 0;
            overflow: hidden;
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 23%;
            border-bottom: 2px solid $vio;
        }
        &:first-child{
            border-top: 1px solid $lgry;
            &::after{
                content: '';
                display: block;
                line-height: 0;
                overflow: hidden;
                position: absolute;
                left: 0;
                top: -1px;
                width: 25%;
                border-top: 2px solid $vio;
            }
        }
        th,td{
            font-size: clamp(20px, 1.1vw, 22px);
            padding: 26px 0;
            vertical-align: middle;
        } 
        th{
            width: 25%;
            font-weight: 600;
            text-align: center;
        }
        td{
            font-weight: 500;
            width: 75%;
            padding-left: 3%;
            text-align: left;
            hr{
                margin: 30px 0;
            }
        }
    }
}

table.gene div.flex{
    width: 100%;
    @include space-between;
    div{
        width: 46%;
        h4{
            width: 100%;
            margin-bottom: 20px;
            padding: 5px 0px;
            text-align: center;
            border: 1px solid $vio;
            border-radius: 6px;
            color: $vio;
            font-weight: 500;
            background: $lblu;
            font-size: clamp(20px, 1.1vw, 22px);
        }
        p.txt_l{
            margin-bottom: 0;
        }
    }
    div.goal{
        h4{
           background: $vio;
            color: $wht;
        }
    }
    img.pc{
        width: 2%;
        height: auto;
        object-fit: contain;
    }
    img.sp{
        display: none;
    }
}

div.gene_box a.pdf{
    @include pdf_link;
}





/************************
お問い合わせ
************************/
div.con_box{
    text-align: center;
    p{
        color: $lvio;
    }
    p.txt_c{
        font-weight: 600;
        margin-bottom: 7px;
    }
    p.txt_l{
        font-weight: 500;
        line-height: 1.5em;
    }
    div.flex{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        grid-column-gap: 3%;
    }
    a{
        font-size: clamp(38px, 2.5vw, 48px);
        font-weight: 600;
        color: $vio;
        span{
            font-size: clamp(35px, 2.3vw, 45px);
            font-weight: 500;
            margin-right: 10px;
        }
    }
    span{
        font-size: clamp(20px, 1.1vw, 22px);
        font-weight: 600;
        color: $vio;
    }
    a.mail{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 331px;
        padding: 16px;
        margin: 20px auto 0 auto;
        background: $vio;
        border-radius: 6px;
        color: $wht;
        font-size: clamp(20px, 1.1vw, 22px);
        font-weight: 600;
        span{
            font-size: clamp(20px, 1.1vw, 22px);
            color: $wht;
            margin-right: 10px;
        }
    }
    p.fax{
        text-align: center;
        font-size: clamp(38px, 2.5vw, 48px);
        color: $vio;
        font-weight: 600;
        margin-top: 20px;
        span{
            font-size: clamp(38px, 2.5vw, 48px);
            font-weight: 500;
            margin-right: 10px;
        }
    }
}





/************************
スタッフの皆様へ
************************/
div.btn_box_staff{
    @include space-between;
    width: 100%;
    height: auto;
    position: relative;
    max-width: 920px;
    margin: 0 auto 93px auto;
    a{
        display: block;
        width: 150px;
        height: 150px;
        box-shadow: 8px 8px 0px #E8E8E8;
        background-size: contain;
        background-repeat: no-repeat;
        &:hover{
            opacity: 1;
        }
    }
    a.counseling{
        background-image: url("../../img/staff/counseling.svg");
        &:hover{
            background-image: url("../../img/staff/counseling_h.svg");
        }
    }
    a.rules{
        background-image: url("../../img/staff/rules.svg");
        &:hover{
            background-image: url("../../img/staff/rules_h.svg");
        }
    }
    a.safe{
        background-image: url("../../img/staff/safe.svg");
        &:hover{
            background-image: url("../../img/staff/safe_h.svg");
        }
    }
    a.award{
        background-image: url("../../img/staff/award.svg");
        &:hover{
            background-image: url("../../img/staff/award_h.svg");
        }
    }
}


div.scr_box_staff{
    width: 100%;
    max-width: 1080px;
    margin: 0 auto 60px auto;
    @include space-between;
    a.news{
        border: 2px solid $egrn;
        color: $egrn;
        span{
            color: $egrn;
        }
        &:hover{
            background: $egrn;
        }
    }
    a.health{
        border: 2px solid $ind;
        color: $ind;
        span{
            color: $ind;
        }
        &:hover{
            background: $ind;
        }
    }
    a.mind{
        border: 2px solid $lgrn;
        color: $lgrn;
        span{
            color: $lgrn;
        }
        &:hover{
            background: $lgrn;
        }
    }

    a{
        width: 32%;
        padding: 15px 0px;
        text-align: center;
        border-radius: 6px;
        font-size: clamp(20px, 1.1vw, 22px);
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
            font-size: clamp(26px, 1.56vw, 30px);
            font-weight: 600;
            margin-right: 3%;
        }
        &:hover{
            opacity: 1;
            color: $wht;
            span{
                color: $wht;
            }
        }
    }
    
}

div.staff_box{
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    h4{
        width: 550px;
        padding: 15px 0px;
        text-align: center;
        border-radius: 6px;
        font-size: clamp(20px, 1.1vw, 22px);
        color: $wht;
        font-weight: 600;
        margin: 0 auto 70px auto;
        position: relative;
        &::after{
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            width: 0;
            height: 0;
            content: '';
            border-width: 13px 19px 0 19px;
            border-style: solid;
        }
    }
    p.txt_r{
        font-size: clamp(14px, 0.9vw, 18px);
        font-weight: 400;
        padding-right: 3%;
        margin-bottom: 17px;
    }
}

#news{
    h4{
        background: $egrn;
        &::after{
            border-color: $egrn transparent transparent transparent;
        }
    }

}

#health{
    h4{
        margin: 0 auto 55px auto;
        background: #5187BE;
        &::after{
            border-color: #5187BE transparent transparent transparent;
        }
    }
    div.health_link{
        display: flex;
        justify-content: center;
        grid-column-gap: 3%;
        margin-bottom: 50px;
        a{
            font-size: clamp(20px, 1.1vw, 22px);
            color: $vio;
            font-weight: 500;
            text-decoration: underline;
            span{
                font-family: "Material Symbols Outlined";
                color: $vio;
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 500;
                margin-right: 5px;
            }
        }
    }
}

#mind{
    h4{
        margin: 0 auto 55px auto;
        background: #90BE51;
        &::after{
            border-color: #90BE51 transparent transparent transparent;
        }
    }

}


div.staff_box{
    &:not(last-child){
        margin-bottom: 60px;
    }
    section{
        margin-bottom: 1px;
        label{
            width: 100%;
            padding: 15px 3%;
            position: relative;
            display: flex;
            align-items: center;
            p{
                color: $aozm;
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 500;
                span{
                    font-size: clamp(20px, 1.1vw, 22px);
                    vertical-align: middle;
                    color: $vio;
                }
            }
            &::before {
                display: block;
                font-family: "Material Symbols Outlined";
                content: "\e145";
                color: $aozm;
                font-size: clamp(25px, 1.8vw, 35px);
                font-weight: 600;
                margin-right: 20px;
            }
        }
        .caption{
            display: block;
            height: 0;
            opacity: 0;
            padding: 0 3%;
            transition: .5s;
            visibility: hidden;
            p{
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 500;
                a{
                    font-size: clamp(20px, 1.1vw, 22px);
                    font-weight: 500;
                    color: $vio;
                    text-decoration: underline;
                    span{
                        font-size: clamp(20px, 1.1vw, 22px);
                        font-weight: 500;
                        color: $vio;
                        text-decoration: underline;
                    }
                }
                a.tel{
                    text-decoration: none;
                    color: $aozm;
                }
            }
            ul.list{
                li{
                    display: flex;
                    span,p{
                        font-size: clamp(20px, 1.1vw, 22px);
                        font-weight: 500;
                    }
                    span{
                        white-space: nowrap;
                    }
                } 
            }
        }
        table{
            tr{
                th,td{
                    font-size: clamp(20px, 1.1vw, 22px);
                    text-align: left;
                    color: $aozm;
                }
                th{
                    font-weight: 600;
                }
                td{
                    font-weight: 500;
                    a{
                        font-size: clamp(20px, 1.1vw, 22px);
                        font-weight: 500;
                    }
                }
            }
        }
        label.link{
                color: $aozm;
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 500;
            a{
                color: $aozm;
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 500;
            }
            a.blue{
                color: $vio;
                font-weight: 500;
                text-decoration: underline;
            }
            &::before {
                content: "\e5cc";
            }
        }
    }
}
.list_check:checked + .list_label{
    p{
        color: $wht;
    }
    &::before {
        content: "\e5cd";
        color: $wht;
    }
}

.list_check:checked + .list_label + .caption{
    height: auto;
    background-color: #FFF;
    border: none;
    opacity: 1;
    padding: 30px 3%;
    visibility: visible;
}


/***スタッフの皆様へのお知らせ***/
#news{
    section{
        label{
            background: #D3EAED;
        }
    }
}


#news .list_check:checked + .list_label{
    background: $egrn;
}



/***健康管理について***/
#health{
    section{
        label{
            background: #D3DFF2;
        }
    }
}

#health .list_check:checked + .list_label{
    background: #5187BE;
}



/***心の健康づくり***/
#mind{
    section{
        label{
            background: #E0EADC;
        }
    }
}

#mind .list_check:checked + .list_label{
    background: $lgrn;
}

div#mind .caption p a{
    display: block;
    color: $vio;
    text-decoration: underline;
    span{
        text-decoration: none;
        margin-right: 10px;
        vertical-align: middle;
    }
}

div.staff_contact{
    width: 100%;
    background: transparent linear-gradient(164deg, #21B795 0%, #21B795 64%, var(--unnamed-color-51bea5) 64%, var(--unnamed-color-51bea5) 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(164deg, #21B795 0%, #21B795 64%, #51BEA5 64%, #51BEA5 100%) 0% 0% no-repeat padding-box;
    padding: 55px 0px;
    h2{
       font-size: clamp(30px, 1.87vw, 36px);
        font-weight: 600;
        color: $wht;
        margin-bottom: 52px;
        text-align: center;
        span{
            display: block;
            font-size: clamp(16px, 1.1vw, 20px);
            color: $wht;
            font-weight: 600;
        }
    }
    div.flex{
        width: 90%;
        max-width: 980px;
        margin: 0 auto 50px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        div.left{
            width: 80%;
            margin: 0 auto 30px auto;
            display: flex;
            grid-column-gap: 3%;
            align-items: center;
            justify-content: center;
            span{
                font-size: clamp(60px, 3.3vw, 65px);
                color: $lblu;
            }
            div.right{
                text-align: center;
                p{
                    font-size: clamp(16px, 1.1vw, 20px);
                    font-weight: 600;
                    color: $wht;
                }
                a{
                    font-size: clamp(50px, 2.8vw, 56px);
                    font-weight: 600;
                    color: $wht;
                }
            }
        }
        ul.right{
            width: 80%;
            margin: 0 auto;
            li{
                display: flex;
                align-items: center;
                grid-column-gap: 3%;
                font-size: clamp(20px, 1.1vw, 22px);
                color: $lblu;
                font-weight: 600;
                &:not(last-child){
                    margin-bottom: 20px;
                }
                span{
                    display: block;
                    width: 34%;
                    background: $lblu;
                    padding: 6px 3%;
                    text-align: center;
                    border-radius: 15px;
                    color: #21B795;
                    font-weight: 600;
                    font-size: clamp(16px, 0.9vw, 18px);
                }
            }
        }
    }
    p.txt_l{
        font-weight: 500;
        color: $wht;
        width: 90%;
        max-width: 980px;
        margin: 0 auto;
        a{
            font-size: clamp(20px, 1.1vw, 22px);
            font-weight: 500;
            color: $wht;
            text-decoration: underline;
        }
        span{
            font-size: clamp(20px, 1.1vw, 22px);
            color: $wht;
            font-weight: 600;
            text-decoration: underline;
        }
    }
}





/************************
健康優良企業「金の認定」を更新取得しました！
************************/
div.award{
    img{
        display: block;
        width: 70%;
        max-width: 350px;
        margin: 0 auto;
        &:first-child{
            margin-bottom: 60px;
        }
    }
    p.txt_l{
        font-weight: 500;
        margin-bottom: 35px;
    }
    a{
        display: block;
        font-size: clamp(20px, 1.1vw, 22px);
        font-weight: 500;
        color: $vio;
        margin-bottom: 57px;
        text-decoration: underline;
        span{
            font-size: clamp(20px, 1.1vw, 22px);
            font-weight: 500;
            color: $vio;
            margin-right: 3%;
        }
    }
}

div.about_award{
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
    background: $wht;
    padding: 27px 3%;
    h4{
        font-size: clamp(16px, 0.9vw, 18px);
        font-weight: 600;
        margin-bottom: 17px;
    }
    p.txt_l{
        font-size: clamp(16px, 0.9vw, 18px);
        font-weight: 500;
        margin-bottom: 40px;
    }
    ul.criterion{
        width: 100%;
        @include space-between;
        flex-wrap: wrap;
        grid-row-gap: 25px;
        li{
            width: 48%;
            h5{
                font-size: clamp(16px, 0.9vw, 18px);
                font-weight: 600;
            }
            p{
                font-size: clamp(16px, 0.9vw, 18px);
                font-weight: 500;
                padding-left: 1em;
            }
        }
    }
}





/************************
金庫保養所のご利用、申し込みについて
************************/
div.safe{
    p.txt_l{
        font-size: clamp(20px, 1.1vw, 22px);
        font-weight: 500;
    }
}

div.pdf_flex{
    width: 100%;
    max-width: 1080px;
    margin: 0 auto 54px auto;
    @include space-between;
    a{
        width: 32%;
        padding: 20px 0px;
        text-align: center;
        border: 1px solid $vio;
        border-radius: 6px;
        font-size: clamp(20px, 1.1vw, 22px);
        font-weight: 500;
        color: $vio;
        span{
            font-size: clamp(20px, 1.1vw, 22px);
            font-weight: 500;
            color: $vio;
            margin-right: 3%;
            vertical-align: middle;
        }
        &:hover{
            background: $vio;
            color: $wht;
            opacity: 1;
            span{
                color: $wht;
            }
        }
    }
}

div.baloon_flex{
    width: 90%;
    max-width: 980px;
    margin: 0 auto 53px auto;
    @include space-between;
    h4{
        width: 48%;
        padding: 15px 0;
        text-align: center;
        font-size: clamp(20px, 1.1vw, 22px);
        font-weight: 600;
        color: $wht;
        border-radius: 6px;
        position: relative;
        &::after{
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            width: 0;
            height: 0;
            content: '';
            border-width: 13px 19px 0 19px;
            border-style: solid;
        }
    }
    h4.main{
        background: $egrn;
        &::after{
            border-color: $egrn transparent transparent transparent;
        }
    }
    h4.office{
        background: #9ABD60;
        &::after{
            border-color: #9ABD60 transparent transparent transparent;
        }
    }
}


div.safe_flow{
    width: 100%;
    max-width: 980px;
    margin: 0 auto 41px auto;
    padding: 34px 4%;
    background: $wht;
    position: relative;
    &::after{
        position: absolute;
        bottom: -24px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 0;
        height: 0;
        content: '';
        border-width: 25px 34px 0 34px;
        border-style: solid;
        border-color: $wht transparent transparent transparent;
    }
    h5{
        font-size: clamp(25px, 1.56vw, 30px);
        font-weight: 600;
        color: $vio;
        margin-bottom: 36px;
        text-align: center;
    }
    .flex{
        width: 100%;
        @include space-between;
        p{
            width: 48%;
            padding: 20px;
            font-size: clamp(20px, 1.1vw, 22px);
            font-weight: 500;
            text-align: left;
            a{
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 500;
                color: $vio;
                text-decoration: underline;
                span{
                    font-size: clamp(20px, 1.1vw, 22px);
                    font-weight: 500;
                    vertical-align: middle;
                    color: $vio;
                }
            }
        }
        p.main{
            background:rgba(81,190,165,0.4);
        }
        p.office{
            background:rgba(154,189,96,0.4);
        }
    }
    p.txt_l{
        margin-top: 40px;
        width: 90%;
        max-width: 569px;
        margin: 40px auto 36px auto;
        font-weight: 500;
    }
    p.txt_c{
        font-weight: 500;
        a{
            font-size: clamp(20px, 1.1vw, 22px);
            font-weight: 500;
        }
    }
}

div.safe_flow.last{
    &::after{
        display: none;
    }
}


.sp_flow{
    display: none;
}


/************************
健康についての参考図書の送付について
************************/
div.book{
    p.txt_l{
        font-weight: 500;
    } 
    img{
        display: block;
        width: 300px;
        margin: 60px auto;
    }
    p.txt_c{
        font-weight: 500;
    }
}





/************************
「心の健康づくり」について
************************/
div.mind{
    p.txt_l{
        font-size: clamp(20px, 1.1vw, 22px);
        font-weight: 500;
        margin-bottom: 100px;
    }
    .flex{
        display: flex;
        flex-flow: column;
        img{
            display: block;
            width: 70%;
            height: auto;
            object-fit: contain;
            box-shadow: 16px 16px 0px #CDD2FD;
            margin: 0 auto 50px auto;
        }
        div.right{
            width: 100%;
            text-align: center;
            p.position{
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 600;
                color: $lvio;
                margin-bottom: 12px;
            }
            p.affiliation{
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 600;
                color: $vio;
                margin-bottom: 10px;
            }
            p.name{
                font-size: clamp(26px, 1.87vw, 36px);
                font-weight: 600;
                color: $vio;
                margin-bottom: 25px;
            }
            p.txt_c{
                font-weight: 500;
                margin-bottom: 30px;
            }
            a.tel{
                display: block;
                font-size: clamp(36px, 2.39vw, 46px);
                font-weight: 600;
                color: $vio;
                margin-bottom: 34px;
                span{
                    font-size: clamp(36px, 2.39vw, 46px);
                    font-weight: 600;
                    color: $vio;
                    margin-right: 10px;
                }
            }
            a.mail{
                display: block;
                width: 50%;
                margin: 0 auto;
                padding: 14px 0%;
                background: $vio;
                border-radius: 6px;
                color: $wht;
                text-align: center;
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 600;
                span{
                    font-size: clamp(20px, 1.1vw, 22px);
                    font-weight: 600;
                    color: $wht;
                    margin-right: 5%;
                }
                &:hover{
                    background: $red;
                    opacity: 1;
                }
            }
        }
    }
}




/************************
就業規則一覧
************************/
div.rules{
    p.txt_r{
        font-weight: 600;
        color: $vio;
        margin-bottom: 57px;
    }
    ul.pdf_box{
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        li{
            margin-bottom: 40px;
            &:last-child{
                margin-bottom: 0px;
            }
            a{
                display: flex;
                justify-content: center;
                align-items: center;
                grid-column-gap: 3%;
                width: 100%;
                padding: 15px 0;
                text-align: center;
                font-size: clamp(20px, 1.1vw, 22px);
                font-weight: 600;
                color: $vio;
                border-radius: 6px;
                border: 1px solid $vio;
                background: $lblu;
                span{
                    font-size: clamp(20px, 1.1vw, 22px);
                    color: $vio;
                }
                &:hover{
                    background: $vio;
                    color: $wht;
                    opacity: 1;
                    span{
                        color: $wht;
                    }
                }
            }
        }
    }
}