@charset "utf-8";

body { font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Meiryo",Verdana,Geneva,Arial,"ＭＳ ゴシック",sans-serif; font-size:16px; letter-spacing:0.05em; line-height:1.7; color:#01124E; }

/*PCスマホ表示切り替え用*/
.br_pc {display: none !important;}
.pc {display: none !important;}

@media screen and (min-width: 840px) {
    .sp {display: none !important;}
    .pc {display: block !important;}
    .br_sp {display: none !important;}
    .br_pc {display: inline !important;}
}

/*共通*/
.wrappers {width: 100vw;overflow: hidden;position: relative;}
.wrapper {width: 100%;display: block;padding: 70px 0 0 0;overflow: hidden;position: relative;z-index: 10;}


@media screen and (min-width: 840px) {
/*========= マウスカーソルの動きのためのCSS ===============*/
/*デフォルトのマウスカーソルを非表示にする*/
html,body,a { cursor: none; }

/*独自のマウスカーソルを作成*/
.cursor { position: fixed; top: -15px; left: -15px; width: 15px; height: 15px; border-radius: 50%; background: rgba(255,88,0, 0.7); z-index: 1000; transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s; transform: translate(0, 0); pointer-events: none; }

/*aタグにホバーした時に見た目変化*/
.cursor.cursor--hover { top: -20px; left: -20px; width: 40px; height: 40px; background: rgba(255,88,0, 0.7); mix-blend-mode:hard-light; }
}

/*コンテンツ*/
.contents { width:90%; max-width:1080px; display:block; margin:0 auto; position:relative; z-index:1; }

/*トップ*/
.view { width:100%; margin:0 0 50px 0; background-color:#ffff00; padding:0 5% 20px 5%; overflow:hidden; }
.viewMain { width:100%; height:100%; padding-top:0px; position:relative;}
.viewMainContents { width:100%; height:100%; display:block; margin:0 auto; position:absolute; }
.viewMainContentsTitle { width:90%; position:relative; z-index:1; margin:50px 0 10px 0;}
.viewMainContentsTitle strong { display:block; font-size:40px; color:#fff; font-family: "din-2014-narrow", sans-serif; font-weight: 700;font-style: normal; line-height:1.2em;}
.viewMainContentsTitle h1 { font-size:14px; }
.viewMainContentsCopy { position:absolute; bottom:10px; z-index:1; left:-5.5%; }
.viewMainContentsCopyBox { height:30px; overflow: hidden; position: relative; margin:0 0 10px 0; background:#01124E; }
.viewMainContentsCopyBox::after { width:100%; height:100%; position:absolute; content: ''; top:0; left:0; background:#fff;z-index:0; transform:translateX(-100%); animation-name: text_box_slide; animation-duration:.5s; animation-fill-mode: forwards; transform: translateX(-100%);}
.viewMainContentsCopyBox strong { width:100%; position:absolute; left:10px; z-index:1; font-size:20px; }  
.viewMainContentsName { width:100%; display:inline-block; font-weight:bold; font-style:normal; font-size:14px; position:absolute; bottom:-30px; z-index:1; left:0; }
.viewMainContentsName strong { font-size:16px; }
.viewMainPhoto { width:100%; padding:120px 0 0 0; height:auto; display:block; position:relative; }
.viewMainPhotoImg  { width:100%; display:block; }
.viewMainSmallPhoto { width:100%; padding:120px 0 0 0; height:auto; display:block; position:relative; }
.viewMainSmallPhotoImg  { width:100%; display:block; }
@media screen and (min-width: 600px){
    .view { padding:0 20px; margin-bottom:50px; }
    .viewMain { width:100%; height:420px; background-color:#ffff00; }
    .viewMainSmall { height:350px; margin-top:30px; }
    .viewMainContents { position:relative; }
    .viewMainContentsTitle { margin-bottom:0; }
    .viewMainContentsTitle strong { font-size:70px; line-height:1.2; }
    .viewMainContentsTitle h1 { font-size:16px; margin-bottom:120px; margin-top:-10px; }
    .viewMainContentsCopy { position:absolute; bottom:150px; z-index:1; left:5%; }
    .viewMainContentsName { bottom:100px; left:5%; }
    .viewMainContentsName strong { font-size:18px; }
    .viewMainPhoto { width:70%; height:auto; position:absolute; margin:0 0 0 30%; bottom:0; right:-3%; }
    .viewMainSmallPhoto { width:60%; height:auto; position:absolute; margin:0 0 0 30%; padding:20px 0 0 0; bottom:0; right:0; }
}
@media screen and (min-width: 840px) {
    .view { margin:0px 0 90px 0; }
    .viewMain { width:100%; height:500px; background-color:#ffff00; margin-bottom:50px; padding-top:10px; }
    .viewMainSmall { height:300px; }
    .viewMainContents { width:90%; height:100%; margin:0 auto; overflow: visible; }
    .viewMainContentsTitle { margin:0; position:relative; z-index:1; }
    .viewMainContentsTitle strong { font-size:120px; }
    .viewMainContentsTitle h1 { margin-bottom:70px; }
    .viewMainContentsCopy { position:relative; bottom:0; z-index:2; left:0; }
    .viewMainContentsCopyBox { height:50px; overflow: hidden; position: relative; margin:0 0 15px 0px; padding-left:10px; }
    .viewMainContentsCopyBox strong { left:10px; z-index:3; font-size:34px; line-height:50px; letter-spacing:0.1em; font-weight:bold; }  
    .viewMainContentsName { line-height:2em; margin:25px 0 0 0; bottom:0; left:0; font-size:16px; }
    .viewMainContentsName strong { font-size:20px; }
    .viewMainPhoto { width:70%; height:500px; position:absolute; margin:0 0 0 30%; top:70px; bottom:0; overflow: hidden;}
    .viewMainPhotoImg { width:auto; height:100%; position:absolute; right:0; bottom:0; }
    .viewMainSmallPhoto { width:70%; height:310px; position:absolute; margin:0 0 0 30%; top:70px; bottom:0; right:-3%; overflow: hidden;}
    .viewMainSmallPhotoImg { width:auto; height:100%; position:absolute; right:0; bottom:0; }
}
@media screen and (min-width: 1120px) {
    .viewMain { height:600px; }
    .viewMainSmall { height:330px; }
    .viewMainMembers { height:500px; }
    .viewMainContents { width:960px; }
    .viewMainContentsTitle { margin:0 0 0 -60px; }
    .viewMainContentsCopyBox { margin:0 0 15px -60px; }
    .viewMainContentsName { margin:25px 0 0 -60px; bottom: 130px;}
    .viewMainPhoto { height:600px; }
    .viewMainSmallPhoto { width:1080px; height:310px; margin:0 0 0 -540px; left:50%; }
    .viewMainMembersPhoto { height:500px; }
}


@keyframes text_box_slide {
0% {
transform: translate(-100%,0)
}
100% {
transform: translate(0,0)
} 
}

/*会社概要・募集要項*/
.contentsDl { width:100%; padding:5px 2.5%; display:flex; flex-direction:column; border-bottom:1px solid #01124E; }
.contentsDl:first-child { border-top:1px solid #01124E; }
.contentsDl dt { width:100%; display:block; font-weight:bold; }
.contentsDl dd { width:100%; display:block; }
.contentsDl dd a { color:#01124E; text-decoration:underline; }
.contentsDl dd a i { margin-left:5px; }
.contents p { margin-bottom:20px; }
@media screen and (min-width: 600px){
    .contentsDl { padding:10px 5%; flex-direction:row; }
    .contentsDl dt { width:30%; }
    .contentsDl dd { width:70%; font-weight:bold; }
    .contentsDl dd a:hover { text-decoration:none; }
}
@media screen and (min-width: 840px) {
    .contentsDl { padding:10px 7.5%; }
    .contentsDl dt { width:25%; }
    .contentsDl dd { width:75%; }
}
@media screen and (min-width: 1120px) {
    .contentsDl { padding:15px 50px; }
}

/*電話のリンク*/
@media screen and (min-width: 840px) {
    .contentsTel { pointer-events:none; }
}

/*エントリーボタン*/
.contentsEntry { width:90%; max-width:460px; height:70px; margin:50px auto; display:flex; justify-content:center; align-items:center; background:#FF5800; color:#fff; position: relative; }
.contentsEntry::before { content: ''; width: 50%; height: 100%; position: absolute; top: 0; left: -75%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); transform: skewX(-25deg); }
.contentsEntry:hover::before { animation: shine 0.7s; }  
.contentsEntryEng { font-family: "din-2014-narrow", sans-serif; font-weight:700; font-size:28px; margin-right:10px; }
.contentsEntryJpn { margin:0 5px; font-size:14px; }
.contentsEntry span.btnarrow{width:50px;position: relative;display: inline-block;padding: 0 20px;color: #fff; text-decoration: none;outline: none;margin-bottom:10px; right:0; transition: all 0.35s ;}
.contentsEntry span.btnarrow::before{content: '';position: absolute;bottom:-8px;left:10%; width: 90%; height: 1px; background:#fff; transition: all 0.35s;}
.contentsEntry span.btnarrow::after{content: '';position: absolute;bottom:-5px;right:0;width: 10px;height:1px; background:#fff;transform: rotate(35deg);transition: all 0.35s;}
.contentsEntry:hover span.btnarrow{ right:-20px; transition: all 0.35s;}
.contentsEntry:hover span.btnarrow::before{ transition: all 0.35s;}
.contentsEntry:hover span.btnarrow::after{ transition: all 0.35s;}
@media screen and (min-width: 600px){
    .contentsEntry { height:90px; }
    .contentsEntryEng { font-size:36px; }
    .contentsEntryJpn { margin:0 10px; }
}
@media screen and (min-width: 840px){
    .contentsEntry { margin:100px auto; }
    .contentsEntryEng { font-size:48px; }
}

@keyframes shine {
  100% { left: 125%; }
}