/* ---------------------------

全体設定

----------------------------*/
:root{
    --main-color: #15ABFA;
    --base-color: rgb(100, 100, 100);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
    color: rgb(100, 100, 100);
}

a {
    text-decoration: none;

}

body {
    /* font-family: "Noto Sans JP", sans-serif; */
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    line-height: 1.8em;
    letter-spacing: 0.05em;
    text-indent: 0.05em;
}

/* ---------------------------

loader：アニメーション

----------------------------*/
#loader{
    position: fixed;
    z-index: 555;
    width: 100%;
    height: 100vh;
    background-color: white;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s;
}

#loader .txt{
    font-size: 120%;
    font-weight: bold;
    color: rgb(30, 50, 93);
}

#loader #logo-cover{
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    background-color: white;
    z-index: 600;
    transition: all 4s;
}

#loader #logo-cover.is-active{
    transform: translateX(100%);
}

#loader img{
    width: 300px;
    height: auto;
}

#loader.is-active{
    transform: translateY(-100vh);
    opacity: 0.3;
}

/* ---------------------------

header

----------------------------*/
header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
    box-shadow: 0.1px 0.1px 5px 0.1px var(--base-color);
    position: fixed;
    z-index: 100;
    width: 100%;
    background-color: white;
    padding: 5px 20px;
}

header > .logo-space{
    font-size: 75%;
    line-height: 1em;
}

header > .logo-space > .common-logo{
    width: 175px;
}

header > .logo-space > strong{
    font-size: 75%;
}

/*グローバルメニュー*/

header > .header-nav{
    gap: 30px;
}

header > .header-nav > .nav-menu{
    display: flex;
    gap: 30px;
    list-style: none;
    position: relative;
}

/*メガメニュー*/
.mega-common{
    position: absolute;
    z-index: 101;
    left: 0;
    top: 60px;
    width: 100vw;
    height: 300px;
    background-color: #15ABFA;
    visibility: hidden;
    transition: transform 0.2s ease;
    transform: translateY(0);
}

.mega-common.is-active{
    visibility: visible;
    transition: all .3s;
    transform: translateY(100%);
}


/* ---------------------------

メインビジュアル

----------------------------*/
#sec-main-visual {
    width: 100%;
    height: calc(100vh - 80px);
    position: relative;
}

#sec-main-visual > .main-visual-inner {
    width: 100%;
    height: calc(100vh - 80px);
    position: relative;
}

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 400%;
    color: white;
    text-shadow: 0.2px 0.2px 10px gray;
    text-indent: 0.15em;
    letter-spacing: 0.15em;
    width: 80%;
    text-align: center;
}

#sec-main-visual > .main-visual-inner > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------

新着情報

----------------------------*/
#sec-update {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    border-right: 0.5px solid var(--base-color);
    border-bottom: 0.5px solid var(--base-color);
    border-left: 0.5px solid var(--base-color);
}

.update-left{
    background-color: var(--main-color);
    width: 15%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 110%;
    font-weight: 500;
    color: white;
}

.update-right{
    width: 85%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 30px;
    padding-left: 30px;
    font-weight: 500;
    position: relative;
    color: var(--base-color);
    transition: all .5s;
}

.update-right:hover{
    /* background-color: var(--base-color); */
    opacity: 0.3;
}

/* .update-right:hover > *{
    color: aliceblue;
} */

.update-right::before{
    position: absolute;
    content: "";
    width: 1px;
    height: 20px;
    background-color: var(--base-color);
    position: absolute;
    bottom: 35px;
    right: 30px;
    transform-origin: right bottom;
    transform: rotate(-55deg);
    transition: all .5s;
}

.update-right::after{
    position: absolute;
    content: "";
    width: 50px;
    height: 1px;
    background-color: var(--base-color);
    position: absolute;
    bottom: 35px;
    right: 30px;
    transition: all .3s;
}

/* .update-right:hover::before,
.update-right:hover::after {
    background-color: white;
    right: 45px;
} */

.update-right:hover::after {
    width: 150px;
}

/* ---------------------------

section：共通設定

----------------------------*/

/*viewmoreボタンのデザイン*/
.viewmore-bt{
    display: block;
    position: absolute;
    width: 200px;
    height: 45px;
    border-radius: 5px;
    border: 0.5px solid var(--base-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s;
}

.viewmore-bt:hover{
    border: 0.5px solid var(--main-color);
    background-color: var(--main-color);
    color: white;
}

.viewmore-bt > i{
    transition: all .5s;
}

.viewmore-bt:hover > i{
    color: white;
}


/* ---------------------------

section：メッセージ

----------------------------*/     
#sec-message{
    padding: 30px 0;
}

#sec-message > .message-inner{
    width: 100%;
    position: relative;
}

#sec-message > .message-inner::before{
    position: absolute;
    /* font-family: "Roboto", sans-serif; */
    font-family: "Cormorant Garamond", serif;
    text-indent: 0;
    letter-spacing: 0;
    content: "Message";
    right: 50%;
    transform: translateX(100%);
    top: 200px;
    font-size: 950%;
    font-weight: 900;
    color: gainsboro;
    opacity: 0.3;
}

#sec-message > .message-inner > .message-copy{
    position: absolute;
    left: 50%;
    transform: translateX(-110%);
    top:200px;
    font-weight: 700;
    font-size: 450%;
    line-height: 1.4em;
}

/*本文*/
#sec-message > .message-inner > .message-body{
    position: absolute;
    right: 50%;
    transform: translateX(100%);
    top:380px;
    line-height: 1.8em;
}

/*viewmoreボタン*/
#sec-message > .message-inner > .message-more-bt{
    right: 50%;
    transform: translateX(100%);
    top:580px;
}

#sec-message > .message-inner > .message-more-bt:hover{
    right: 50%;
    transform: translateX(100%);
    top:580px;
}

/*画像*/
#sec-message > .message-inner >.message-img01{
    position: absolute;
    left: 50%;
    transform: translateX(-180%);
    top: 600px;
    width: 350px;
    height: 500px;
    background-color: antiquewhite;
    overflow: hidden;
}

#sec-message > .message-inner >.message-img01 > img{
    width: 100%;
    object-fit: cover;
    transform: scale(2.4) translateX(-80px) translateY(70px);
}

#sec-message > .message-inner > .message-img02{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 900px;
    width: 500px;
    height: 230px;
    background-color: antiquewhite;
}

#sec-message > .message-inner > .message-img02 > img{
    width: 100%;
    object-fit: cover;
}

#sec-message > .message-inner > .message-img03{
    position: absolute;
    right: 50%;
    transform: translateX(190%);
    top: 800px;
    width: 380px;
    height: 550px;
    background-color: antiquewhite;
    overflow: hidden;
}

#sec-message > .message-inner > .message-img03 > img{
    width: 100%;
    object-fit: contain;
    transform: scale(2.5) translateX(15px) translateY(70px);
}

/* ---------------------------

section：リクルーティングビジネス

----------------------------*/          
#sec-business {
    margin-top: 1250px;
    width: 100%;
    background-color: antiquewhite;
}

#sec-business > .business-inner {
    position: relative;
    width: 100%;
}

#sec-business > .business-inner::before {
    /* font-family: "Roboto", sans-serif; */
    font-family: "Cormorant Garamond", serif;
    position: absolute;
    content: "Recruiting Business";
    font-size: 950%;
    font-weight: 900;
    text-indent: 0;
    letter-spacing: 0;
    color: gainsboro;
    left: 50%;
    transform: translateX(-50%);
    top: 200px;
    opacity: 0.3;
    width: 100%;
    text-align: center;
}

#sec-business > .business-inner > .business-copy {
    font-weight: 900;
    font-size: 175%;
    font-weight: 700;
    position: absolute;
    top: 400px;
    left: 10%;
}

#sec-business > .business-inner > .business-body {
    position: absolute;
    top: 480px;
    left: 10%;
}

#sec-business > .business-inner > video {
    width: 300px;
    height: 170px;
    overflow: hidden;
    transform: scale(2.5);
    position: absolute;
    right: 20%;
    top: 500px;
    /* background-color: #15ABFA; */
}
/* ---------------------------

section：サービスラインナップ

----------------------------*/    
#sec-service{
    margin-top: 2080px;
    width: 100%;
}

#sec-service > h2{
    /* font-family: "Roboto", sans-serif; */
    font-family: "Cormorant Garamond", serif;
    width: 900px;
    margin: auto;
    font-size: 175%;
    font-weight: 700;
    padding: 0 0 10px 30px;
}

#sec-service > p{
    width: 900px;
    margin: auto;
    padding: 0 0 20px 30px;
}

#sec-service > .service-box{
    width: 960px;
    margin: auto;
    background: rgba(233, 233, 233, 0.4);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
    padding: 30px;
}

/* サービスカード */
.service-card{
    width: 280px;
    display: flex;
    flex-direction: column;
    transition: all .5s;
}

.service-card *{
    transition: all .5s;
}

.service-card:hover{
    opacity: 0.7;
}

.service-card:hover > .service-card-visual > img{
    transform: scale(1.2);
}

.service-card:nth-last-child(1){
    margin-right:155px;
}

.service-card:nth-last-child(2){
    margin-left: 155px;
}

.service-card > .service-card-visual{
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
}

.service-card > .service-card-visual > h3{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%, -80%);
    font-size: 130%;
    font-weight: 900;
    color: white;
    z-index: 20;
}

.service-card > .service-card-visual > p{
    /* font-family: "Roboto", sans-serif; */
    font-family: "Cormorant Garamond", serif;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%, 0%);
    font-size: 80%;
    color: white;
    z-index: 20;
}

.service-card > .service-card-visual > .visual-cover{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 96, 144, 0.6);
    z-index: 19;
}

.service-card > .service-card-visual > img{
    width: 100%;
    object-fit: cover;
}

.service-card > .service-card-word{
    background-color: white;
    padding: 15px;
    font-size: 80%;
    line-height: 1.8em;
    /* flex: 1 1 auto; */
    flex-grow: 1;
}

/* ---------------------------

section：Other Business

----------------------------*/  
/* #sec-other-business {
} */

#sec-other-business > .other-business-inner {
    /* width: calc(100% - 5%); */
    position: relative;
}

#sec-other-business > .other-business-inner::before {
    /* font-family: "Roboto", sans-serif; */
    font-family: "Cormorant Garamond", serif;
    position: absolute;
    content: "Other Business";
    font-size: 950%;
    font-weight: 900;
    text-indent: 0;
    letter-spacing: 0;
    color: gainsboro;
    right: 5%;
    top: 200px;
    opacity: 0.3;
    width: calc(100% - 5%);
    text-align: right;
}

/*メインビジュアル*/
#sec-other-business > .other-business-inner img {
    position: absolute;
    width: 50%;
    height: 600px;
    left: 0;
    top: 350px;
    object-fit: cover;
    overflow: hidden;
}

/*右側レイアウト*/
#sec-other-business > .other-business-inner > .other-business-copy:nth-of-type(1) {
    position: absolute;
    left: calc(50% + 50px);
    top: 400px;
    font-size: 175%;
    font-weight: 700;
}

#sec-other-business > .other-business-inner > .other-business-copy:nth-of-type(2) {
    position: absolute;
    left: calc(50% + 50px);
    top: 870px;
    font-size: 75%;
    font-weight: 700;
    padding-bottom: 30px;
}

#sec-other-business > .other-business-inner > .other-business-body {
    position: absolute;
    left: calc(50% + 50px);
    top: 480px;
}

/*viewmoreボタン*/
#sec-other-business > .other-business-inner > .otherbusiness-bt{
    left: calc(50% + 50px);
    top: 650px;
}


/* #sec-other-business > .other-business-inner > hr {
    display: block;
    position: absolute;
    left: calc(50% + 50px);
} */

#sec-other-business > .other-business-inner > a.zyoso-logo {
    display: block;
    position: absolute;
    left: calc(50% + 50px);
    top: 750px;
    width: 250px;
    height: 100px;
}

#sec-other-business > .other-business-inner > .zyoso-logo > img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: auto;
}

/* ---------------------------

section：NEWS

----------------------------*/  
#sec-news{
    margin-top: 900px;
}

#sec-news > .news-inner{
    position: relative;
}

#sec-news > .news-inner::before {
    /* font-family: "Roboto", sans-serif; */
    font-family: "Cormorant Garamond", serif;
    position: absolute;
    content: "News";
    font-size: 950%;
    font-weight: 900;
    text-indent: 0;
    letter-spacing: 0;
    color: gainsboro;
    left: 15%;
    top: 200px;
    opacity: 0.3;
    width: calc(100% - 15%);
    text-align: left;
}

/* NEWSボタン*/
#sec-news > .news-inner > .news-button {
    position: absolute;
    content: "News";
    left: 15%;
    top: 330px;
    width: calc(100% - 15%);
    list-style: none;
    display: flex;
    gap: 30px;
    align-items: center;
}

#sec-news > .news-inner > .news-button > li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 200px;
    background-color: #15ABFA;
    border-radius: 5px;
}

#sec-news > .news-inner > .news-button > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 500;
    font-size: 130%;
    color: white;
    border-radius: 5px;
}

#sec-news > .news-inner > .news-contents {
    position: absolute;
    width: 980px;
    left: 15%;
    top: 430px;
    border-top: 1px solid var(--base-color);
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    padding: 30px 0;
}

/* NEWS中身 */
#sec-news > .news-inner > .news-contents > dt {
    width: 20%;
}

#sec-news > .news-inner > .news-contents > dd {
    width: 80%;
    font-weight: 700;
}

#sec-news > .news-inner > .news-contents > div {
    width: 20%;
    border-bottom: 1px solid var(--base-color);
    padding-bottom: 30px;
}
#sec-news > .news-inner > .news-contents > p {
    width: 80%;
    border-bottom: 1px solid var(--base-color);
    padding-bottom: 30px;
}

#sec-news > .news-inner > .news-contents > p > span {
    display: block;
    height: 35px;
    width: 120px;
    background-color: #15ABFA;
    border-radius: 5px;
    color: white;
    font-weight: 700;
    text-align: center;
    padding-top: 3px;
    font-size: 75%;
}

/*viewmoreボタン*/
#sec-news > .news-inner > .news-more-bt{
    left: calc(15% + 980px);
    transform: translateX(-100%);
    top: 865px;
}

/* ---------------------------

section：フッター共通

----------------------------*/
.div-space{
    height: 1000px;
}

#sec-footer-common{
    display: flex;
    gap: 50px;
    width: 100%;
    height: 80px;
    overflow: hidden;
}

.scroll-survice-area{
    width: 100%;
    position: relative;
}

.scroll-survice-area-inner{
    display: flex;
    width: 200%;
}

.scroll-item{
    flex-basis: 50%;
    display: flex;
    align-items: center;
}



/* ---------------------------

フッター

----------------------------*/
#footer{
    width: 100%;
    background-color:var(--main-color);
}

/*フッター上部*/
.footer-top{
    padding: 50px 80px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 30px;
    width: 100%;
}

.footer-nav{
    width: 100%;
    display: flex;
    align-items: center;
}

.footer-nav > ul{
    width: 100%;
    display: flex;
    gap: 30px;
    align-items: center;
    list-style: none;
}

.footer-nav > ul > li:nth-of-type(1){
    width: 190px;
    padding-right: 20px;
    border-right: 0.5px solid white;
}

.footer-nav > ul > li {
    color: white;
}

.footer-nav > ul > li > a {
    color: white;
}

/*フッター下部*/
.footer-bottom{
    background-color: rgb(232, 232, 232);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 80px;
}

.footer-bottom-left > span:nth-of-type(1){
    font-size: 130%;
    font-weight: 900;
}

.footer-bottom-left > span:nth-of-type(2){
    font-size: 60%;
}

.footer-bottom-right{
    font-size: 120%;
    font-weight: 900;
}

/*コピーライト*/
.footer-copyright-area{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 80px;
    background-color: white;
}

.footer-copyright-area > ul{
    list-style: none;
    display: flex;
    gap: 20px;
}

.footer-copyright-area > ul li{
    font-size: 75%;
}

.footer-copyright-area > small{
    display: block;
}