@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

main.main{
background: #000
}

.sg{
font-family: "Jost", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}

i{
font-style: normal;
display: block;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,ヒラギノ角ゴ ProN,Hiragino Kaku Gothic ProN,メイリオ,Meiryo,osaka,ＭＳ Ｐゴシック,MS PGothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji,sans-serif;
letter-spacing: 0.05em
}

ul.recruitment{
width: 90%;
margin: 0px auto;
display: flex;
align-items: end;
margin-bottom: 30px;
border-bottom: solid 1px #fff
}

ul.recruitment li{
width: 50%;
text-align: center;
height: 46px;
line-height: 46px
}

ul.recruitment li:hover{
cursor: pointer
}

li.selected{
background: #fff;
color: #000;
border-radius: 3px 3px 0px 0px;
text-decoration: underline;
}

section.recruitment{
padding: 0px 5% 30px 5%;
background: #000
}

h2.recruitment{
width: 100%;
border:solid 1px #fff;
font-size:15px;
text-align: center;
padding: 6px 15px;
margin-bottom: 20px
}

article.recruitment{
margin-bottom: 20px
}

h3.recruitment{
color: #fc33f7;
font-size:16px;
font-weight: 700;
margin-bottom: 15px
}

p.recruitment{
font-size:14px;
line-height: 1.8
}


div.client_partner{
width: 90%;
margin: 0px auto 20px auto;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}


section.recruitment.is-active {
display: block;
}


h2.recruitment3{
text-align: center;
color: #fff;
font-size:20px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 20px
}

h2.recruitment3:before,h2.recruitment3:after{
content:"";
width: 30px;
height: 1px;
background: #fff
}

h2.re_section{
text-align: center;
padding: 4px 0px;
margin-bottom: 30px;
color: #4676d8;
font-size: 28px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}

h2.re_section i{
color: #fff;
font-size:12px;
}

div.w90{
width: 84%;
margin: 0px auto;
}

p.re_txt{
line-height: 1.8;
text-align: center
}

h1.re_section{
font-size: 26px;
text-align: center;
margin-bottom: 20px;
line-height: 1.2
}

section#overview{
padding: 30px 0px
}

div.flow{
display:  flex;
align-items: start;
justify-content: space-between;
flex-wrap: wrap
}

article.flow{
width: 46%;
aspect-ratio: 1 / 1;
background: #fff;
border-radius: 50%;
position: relative;
text-align: center;
margin-bottom: 30px
}

p.number{
width: 100%;
position: absolute;
transform: translateY(-50%);
text-align: center;
font-size:34px;
color: #4676d8;
line-height: 100%
}

img.flow_icon{
width: 50%;
margin: 20px auto 0px auto;
}

h3.flow{
color: #000;
font-size: 14px;
font-weight: 700
}

article.flow1:after,article.flow3:after{
content: "";
position: absolute;
top:50%;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 12px solid #4676d8;
right: -13%;
}

article.flow2:after{
content: "";
position: absolute;
top:50%;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 12px solid #4676d8;
right: 105%;
top: 106%;
transform: rotate(135deg);
}


section#guideline{
position: relative;
margin-right: 10%;
background-color: #fff;
border-radius: 0 30px 30px 0;
padding: 60px  60px 60px 30px;
margin-bottom: 60px
}

#guideline h2 {
position: absolute;
writing-mode: vertical-rl;
text-align: left;
right: 0;
top: min(6vw, 30px);
transform: translateX(34%);
}

#guideline h2 i {
text-indent: 0.2em;
color: #000
}

ul.guideline{
width: 100%;
color: #000;
display: table;
table-layout: fixed;
border-bottom: solid 1px #4676d8;
padding-bottom: 20px;
margin-bottom: 20px
}

ul.guideline li{
display: table-cell
}

li.guideline_title{
width: 30%;
color: #4676d8
}

li.guideline_txt{
text-align: justify;
}

section#schedule{
position: relative;
margin-left: 10%;
background: #81bcff;
background-size: 50%;
border-radius: 30px 0 0 30px;
padding: min(10vw, 80px) min(14vw, 180px);
color: #fff;
text-align: center;
}

section#schedule h2 {
position: absolute;
writing-mode: vertical-rl;
text-align: left;
left: 0;
top: min(6vw, 30px);
transform: translateX(-34%);
color: #fff;
display: flex;
flex-direction: column-reverse;
}

h3.schedule{
font-family: "Jost", sans-serif;
font-weight: normal;
font-size:26px;
color: #c4eeff;
display: block;
margin-bottom: 30px
}

h3.schedule i{
color: #fff;
font-size:13px;
font-weight: 600
}

p.schedule{
line-height: 2;
border-bottom: solid 1px #fff;
padding-bottom: 30px;
margin-bottom: 30px;
text-align: justify
}

div.re_section_image{
display: flex;
align-items: center;
width: 84%;
margin: 20px auto;
justify-content: space-between
}

div.re_section_image img{
width: 48%
}

p.re_section_image{
width: 84%;
font-size: 15px;
margin: 20px auto;
color: #ffff00;
text-align: center
}

section#faq{
padding: 30px 5% 30px 5%;
}

article.faq{
border-top:solid 1px #4676d8;
}

article.faq:last-of-type{
border-bottom:solid 1px #4676d8;
}

h3.faq{
display: flex;
align-items: center;
padding: 18px 0px;
font-size:13px;
position: relative
}

h3.faq:before{
content: "Q";
font-size:22px;
width: 50px;
font-family: "Jost", sans-serif;
color: #4676d8;
}

h3.faq:after {
content: '';
width: 20px;
height: 20px;
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
background: url(../img/recruitment/plus.png) no-repeat center;
background-size: cover;
transition: transform 0.3s 
ease-in-out;
}

h3.faq.minus:after {
background: url('../img/recruitment/minus.png') no-repeat center;
background-size: cover;
transform: translateY(-50%) rotate(180deg);
}

h4.faq{
display: flex;
align-items: start;
padding: 10px 0px;
font-size:12px;
}

.minus{
display: flex
}

h4.faq:before{
content: "A";
font-size:22px;
width: 50px;
height: 100%;
display:block;
font-family: "Jost", sans-serif;
color: #4676d8;
}

h3.faq span{
width: calc(100% - 100px)
}

h4.faq span{
width: calc(100% - 50px);
line-height: 1.8
}

footer.recruit_footer{
padding: 60px 5% 22vh 5%;
background: #fff;
color: #000;
text-align: center;
}

div.sns_icon{
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 40px
}

a.sns_icon{
width: 36px;
display: block
}

p.recruit_footer{
font-size: 12px;
font-weight: 500;
margin-bottom: 20px
}

h4.recruit_footer{
background: #81bcff;
padding: 10px 0px;
border-radius: 10px 10px 0px 0px;
color: #fff;
font-size: 16px
}

a.recruit_footer{
display: block;
background: #c4eeff;
padding: 15px 0px;
border-radius: 0px 0px 10px 10px;
font-size: 16px;
color: #000;
display: flex;
align-items:  center;
gap:10px;
justify-content: center
}

a.recruit_footer:before{
content: "";
width: 20px;
height: 20px;
background: url(../img/recruitment/mail.svg) no-repeat center;
background-size: 100%
}

div.footer_contact{
width: 100%;
max-width: 700px;
position: fixed;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
}

a.footer_contact{
display:  block;
width: 90%;
margin: 0px auto 20px auto;
padding: 10px 10px;
border-radius: 6px;
justify-content: space-between;;
display: flex;
align-items: center;
color: #fff
}


div.footer_contact_line{
width: 100%;
text-align: center;
background: #00b900 url(../img/recruitment/line.svg) no-repeat 10% center;
background-size: 10%;
border-radius: 100px;
padding: 8px 0px
}

p.footer_contact_line{
font-size: 11px;
margin-bottom: 3px
}

h3.footer_contact_line{
font-size: 20px;
line-height: 100%
}

div.footer_menu{
display: flex;
align-items: center;
 box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
 background: #fff
}

a.footer_menu{
text-align: center;
display: block;
color: #000;
height: 78px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
width: 20%;
border-right: #ccc solid 1px;
}

p.footer_menu{
font-family: "Jost", sans-serif;
font-size: 14px;
}

article.partner{
width: 90%;
height: 52px;
margin: 0px auto 10px auto;
border-radius: 3px;
border: solid 2px #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 10px
}


.pink_b {
box-shadow: inset 0 0 6px #ff4fbf, inset 0 0 14px #ff4fbf, 0 0 10px #ff4fbf, 0 0 18px #ff4fbf;
}

.blue_b {
    box-shadow: inset 0 0 5px #4fc3ff, inset 0 0 10px #4fc3ff, 0 0 10px #4fc3ff, 0 0 30px #4fc3ff;
}

h3.partner{
font-size: 19px
}

article.partner p{
background:#ff4fbf;
color:#fff;
padding:3px 10px;
border-radius:3px;
font-size:14px;
animation: blink 1.2s infinite;
}

@keyframes blink{
0%{opacity:1;}
50%{opacity:0.4;}
100%{opacity:1;}
}

b.partner{
font-size: 140%
}

p.limited{
width: 90%;
color: #fff;
margin: 0px auto 20px auto;
text-align: center;
font-weight: 500;
font-size: 14px
}

div.second_period_inner{



}


a.second_period{
width:185px;
height:185px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
border-radius:50%;

background:
linear-gradient(#000,#000) padding-box,
linear-gradient(
135deg,
#00f5ff 0%,
#00cfff 30%,
#ff00c8 65%,
#8a2cff 100%
) border-box;

border:6px solid transparent;

color:#fff;

margin:0 auto 20px;

font-size:16px;

/* ネオン光 */
box-shadow:
0 0 3px rgba(0,245,255,0.35),
0 0 6px rgba(0,245,255,0.3),
0 0 10px rgba(255,0,200,0.25),
0 0 18px rgba(255,0,200,0.2);
}

a.second_period small{
display: block;
font-size: 13px
}

div.parallax{
width: 100%;
max-width: 700px;
height: 100vh;
position: fixed;
z-index: -1;
top: 0px;
left: 50%;
transform: translateX(-50%)
}

div.parallax:after{
content: "";
width: 100%;
height: 100%;
top:0px;
left: 0px;
position: absolute;
background: rgba(0,0,0,0.7);
z-index: 1
}

video.top_new{
width: 100%;
height: 100%;
object-fit: cover
}