@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.7em;  }

/*PCスマホ表示切り替え用*/
.br_pc {display: none !important;}
.pc {display: none;}
.sp {display: block;}
.inline_sp { display:inline; }
.inline_pc { display:none; }
@media screen and (min-width: 840px) {
    .sp {display: none !important;}
    .pc {display: block;}
    .br_sp {display: none !important;}
    .br_pc {display: inline !important;}
    .inline_sp { display:none; }
    .inline_pc { display:inline; }
}

/*共通*/
.wrappers {width: 100vw;overflow: hidden;position: relative;}
.wrapper {width: 100%;display: block;padding: 70px 0 0 0;overflow: hidden;position: relative;z-index: 10;}
h2 { width:100%; font-size:40px; text-align:center; font-family: "futura-pt-bold", sans-serif; font-optical-sizing:auto; font-weight:bold; font-style:normal;}
span.sp_h2 { width:100%; font-size:16px; color:#00E0E0; font-weight:bold;  text-align:center; display:inline-block; }
strong.st_midashi { width:100%; font-size:20px; font-weight:bold;  text-align:center; margin-top:30px; }
@media screen and (min-width: 840px) {
    h2 { font-size:62px; line-height:1.2em; }
    strong.st_midashi { font-size:28px; margin-top:50px; }
}
.blue { background:#00E0E0; }
.white { background:#ffffff; }
.center { width:100%; text-align:center; display:inline-block; }
a:link { color:#000; }
a:visited { color:#000; }
a:hover { color:#000; }
a:active { color:#000; }
.bold { font-weight:bold; }


/*画像のアニメーション*/
.mask_wrap{
	display: table;
	overflow: hidden;
}
.mask-wrap .mask{
	display: table;
	position: relative;
	margin-bottom: .25em;
	left: -100%;
	overflow: hidden;
}
.mask-wrap .mask-bg{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background:#00E0E0;
}

/*コンテンツ*/

.contents { width:90%; max-width:1080px; padding:50px 0; display:block; margin:0 auto; position:relative; z-index:1; }
@media screen and (min-width: 840px) {
    .contents { padding:80px 0; }
}
.contents_wrap { width:100%; }
.contents_wrap.gray { width:100%; background:#f7f7f7; }


/*トップ*/
.top_wrap { width:100%; height:auto; padding-bottom:50px; display:block; background: linear-gradient(to bottom, transparent 50%, #f7f7f7 50%);}
.top { width:100%; margin:30px auto 0 auto; display:flex; flex-wrap:wrap; }
.ul_top { width:100%; display:flex; flex-wrap:wrap;}
.ul_top li.li_name { width:100%; text-align:center; }
.ul_top li.li_photo { width:100%; text-align:center; }
.ul_top li.li_photo img { width:100%; }
.ul_top li.li_photo p { width:100%; text-align:center; }
@media screen and (min-width: 840px) {
    .top_wrap { height:500px; }
    .top { max-width:1240px; height:100%; margin:0 auto; display:block; }
    .ul_top { height:100%; position:relative; }
    .ul_top li.li_name { width:15%; }
    .ul_top li.li_photo { width:85%; overflow:visible; }
    .ul_top li.li_photo .mask-wrap { position:absolute; left:0; }
    .ul_top li.li_photo .mask { max-width:1100px; overflow:hidden; position:absolute; left:0; }
    .ul_top li.li_photo img { width:1100px; }
    .ul_top li.li_photo p { text-align:left; }
    .ul_top li.li_photo p { position:absolute; bottom:0; }
}

#text-container {font-size:16px; writing-mode:initial;text-orientation: upright;}
@media screen and (min-width: 840px) {
    #text-container { font-size:15px; writing-mode: vertical-rl;text-orientation: upright;}
}
#text-container span.japan { color:#00E0E0; }
@media screen and (min-width: 840px) {
    #text-container span.japan { margin-top:-130px; }
}
.fade-in {opacity: 0;display: inline-block;animation: fadeIn 0.5s forwards;}
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }

.rotate-90 {transform:initial;}
@media screen and (min-width: 840px) {
    .rotate-90 {transform: rotate(90deg);display: inline-block;}
}

#text-container strong.josefin-sans { font-size:40px; color:#000; line-height:1.2em;  }
#text-container strong.josefin-sans .fade-in { margin:initial;}
@media screen and (min-width: 840px) {
    #text-container strong.josefin-sans { font-size:62px; }
    #text-container strong.josefin-sans .fade-in { margin:-10px;}
}

/*フォント*/
.josefin-sans{font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-style: normal;}


/*リンクのボタン*/
.circle { width:auto; height:auto; display:flex; align-items:center; font-family: "futura-pt-bold", sans-serif;font-weight: 700;font-style: normal;font-optical-sizing: auto;font-weight:bold;font-style: normal; font-weight:bold; font-size:16px; position:absolute; }
.circle span {width: 30px; height: 30px;display: block;background: #ffff00;border-radius: 50%;text-align: center;position: relative;overflow: hidden;transition: background 0.3s ease;}
@media screen and (min-width: 840px) {
    .circle { position:relative; }
    .circle span {width: 60px; height: 60px;display: block;background: #ffff00;border-radius: 50%;text-align: center;position: relative;overflow: hidden;transition: background 0.3s ease;}
}
.circle span::before {content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;background: black;border-radius: 50%;transform: translate(-50%, -50%);transition: width 0.3s ease, height 0.3s ease;}
.circle span:hover::before {width: 120px;height: 120px;}
.circle span svg { width:50%; position: relative;z-index: 1;transition: stroke 0.3s ease; margin-top:40%; margin-left:10%; }
@media screen and (min-width: 840px) {
    .circle span svg { width:auto; margin-left:auto; }
}
.circle span:hover svg path {stroke: #ffffff;}
.circle span img { width:18px; margin:25px 21px 0 21px ;}


/*トップ*/
.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:25px 0 10px 0;}
.viewMainContentsTitle strong { display:block; font-size:50px; 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; text-align: justify;}
@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%; }
}

.li_photo { overflow: hidden;}

/*エントリーフォーム*/
.div_entry { display:none; }


.div_entry .a_entry .contents span { display:block; color:#FFFF02; text-align:center; }
.div_entry .a_entry .contents strong { width:100%; line-height:1.7em; text-align:left; display:block; font-size:75px;  font-family: "futura-pt-bold", sans-serif; color:#fff;}
.div_entry_text { width:100%; display:flex; justify-content:space-between; color:#fff; }
.div_entry_text p { font-size:22px; font-weight:bold; color:#fff; display:inline-block; text-align:left; }
.div_entry .a_entry .contents span.sp_entryform { text-align:left; }
@media screen and (min-width: 840px){
    .div_entry.pc { width:100%; height:300px; position:relative; display:block; overflow:hidden;  display: flex;justify-content: center;align-items: center;}
    .div_entry.pc .a_entry .contents { width:90%; height:100%; padding:0; margin:0 5% 0 5%; }
    .div_entry.pc .video { width:100%; position:absolute; top:-50px; }
    .div_entry.pc .video {
        width: 100%;
        height: 300px;
        position: absolute;
        top: 0; /* 必要に応じて調整 */
        object-fit: cover;
    }
    
    .div_entry.pc .a_entry .contents { width:45%; height:100%; padding:50px 0; margin:0 auto; display:flex; flex-wrap:wrap; }
    @media screen and (min-width:900px){
        .div_entry.pc .a_entry .contents { width:80%; }
    }
    @media screen and (min-width:1200px){
        .div_entry.pc .a_entry .contents { width:45%;}
    }
    .div_entry_text p { font-size:35px;  white-space: nowrap; }
    .div_entry.pc .a_entry .contents strong { width:40%; line-height:1.2em; }
    .div_entry.pc .a_entry .contents span.sp_entryform { width:80%; text-align:left; margin-bottom:30px; }
    .div_entry.pc .circle { margin-top:20px; }
}


.ul_top li.li_photo { position:relative; overflow:hidden; }

.ul_column3 { width:100%; display:flex; justify-content:space-between; flex-wrap:wrap; }
.ul_column3 li { width:33%;  }
.ul_column3 li img { width:100%; }
.ul_column3 li.li_long { width:49.7%; }
.ul_column3 li.li_long img { width:100%; }
.mask-wrap .mask.murasaki .mask-bg { background:#883B87; }
.mask-wrap .mask.yellow .mask-bg { background:#EBEB00; }
.mask-wrap .mask.green .mask-bg { background:#39A5AE; }
.mask-wrap .mask.orange .mask-bg { background:#EA5E2A; }
.mask-wrap .mask.pink .mask-bg { background:#DE295A; }