@charset "utf-8";

/*--------------------breadcrumb--------------------*/

header.contents_header{
padding-top: 80px;
}

ol.contents {
border-top: solid 1px #dcdcdc;
border-bottom: solid 1px #dcdcdc;
width: 100%; 
margin: 0px auto;
text-align: right;
padding: 15px 4%
}

ol li{
display:inline-block;
vertical-align: middle;
}

ol li:after{
content: '»';
font-size: 14px;
margin: 0px 5px 0px 5px;
color:#999
}

ol li:last-child:after{
content: '';
display: none;
}

a.breadcrumb span{
text-decoration: none;
font-weight: 500;
font-size:12px;
}

ol li:first-child a{
background: url(../img/icon/home.png) no-repeat left center;
background-size: 12px;
padding-left: 20px;
}

ol li a:hover {
text-decoration: underline;
}

/*--------------------section--------------------*/

section#contents{
padding: 30px 0px
}

h2.contents{
width: 94%; 
margin: 0px auto;
font-family: 'Impact';
font-weight: 100;
color: #20529a;
font-size:42px
}

i.contents{
font-weight: 600;
color: #000;
font-size: 14px;
}

h2.normal{
font-family: "hiragino-kaku-gothic-pron", sans-serif!important;
font-weight: 700
}

i.contents span{
font-weight: 200;
display: inline
}

div.mvv{
width: 94%; 
margin: 0px auto;
}

p.mvv{
font-weight: 600;
color: #20529a;
margin-top: 20px;
margin-bottom: 10px;
font-size:16px
}

a.mvv{
width: 200px;
height: 50px;
font-weight: 600;
line-height: 50px;
text-align: center;
display: block;
border-radius: 25px;
border:solid 1px #000;
box-shadow: 1px 1px 1px #000;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
font-size:16px
}

img.mvv{
width: 30px
}

section.black{
padding: 40px 0px;
text-align: center;
position: relative;
color: #fff
}

section.black:before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top:0px;
left: 0px;
background-color: rgba(0,0,0,0.8);
mix-blend-mode:multiply
}

section.black01{
background: url(../img/personality/mikamo.jpg) no-repeat center;
background-size: cover
}

section.black02{
background: url(../img/personality/0F8A8696_1.jpg) no-repeat center;
background-size: cover
}

section.black03{
background: url(../img/personality/0F8A8590_1.jpg) no-repeat center;
background-size: cover
}

h2.personality{
position: relative;
z-index: 1;
font-size:22px;
margin-bottom: 20px;
line-height: 1.4
}

p.personality{
width: 90%;
margin: 0px auto;
text-align: justify;
position: relative;
z-index: 1;
line-height: 1.6
}

section.white{
padding: 40px 0px;
text-align: center;
position: relative;
overflow: hidden
}

section.white01:after{
content: "";
width: 50%;
height: 60%;
transform: skewX(-25deg) translateX(50%);
background: linear-gradient(90deg,rgba(79, 172, 254, 0.3) 0%, rgba(0, 242, 254, 0.3) 100%);
position: absolute;
top:0px;
left: -50%
}

section.white02:after{
content: "";
width: 100%;
height: 100%;
transform: skewX(-35deg) ;
background: linear-gradient(276deg,rgba(79, 172, 254, 0.3) 0%, rgba(0, 242, 254, 0.3) 100%);
position: absolute;
top:0px;
left: 50%
}

/*-------------------mvv--------------------*/

main.mvv{
overflow: hidden
}

section.mvv{
padding: 0px 3%;
padding-bottom: 30px;
position: relative;

}

.hexagon1:before{
content: "";
height: 140%;
aspect-ratio: 1 / 1;
clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 74% 93%, 26% 93%, 0% 50%);
background: linear-gradient(0deg,rgba(79, 172, 254, 0.3) 0%, rgba(27, 218, 254, 0.3) 66%);
top:50%;
left:-300px;
transform: translateY(-50%);
position: absolute
}

.hexagon1:after{
content: "";
height: 120%;
aspect-ratio: 1 / 1;
clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 74% 93%, 26% 93%, 0% 50%);
background: linear-gradient(180deg,rgba(71, 96, 255, 0.3) 0%, rgba(13, 204, 255, 0.3) 66%);
top:80%;
right:-300px;
transform: translateY(-50%);
position: absolute
}

.hexagon2:after{
content: "";
height: 120%;
aspect-ratio: 1 / 1;
clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 74% 93%, 26% 93%, 0% 50%);
background: linear-gradient(0deg,rgba(79, 172, 254, 0.3) 0%, rgba(27, 218, 254, 0.3) 66%);
bottom:0px;
right:-700px;
position: absolute
}

h3.mvv{
width: 110px;
height: 30px;
border:solid 1px #000;
text-align: center;
line-height: 30px;
font-weight: 700;
margin-bottom: 10px
}

h2.mvv{
font-family: "Noto Serif JP", serif;
font-weight: 800;
font-size:32px;
margin-bottom: 20px;
position: relative
}

h2.mvv span{
font-family: 'Rotters';
display: block;
font-weight: 200;
color: #00a0e6;
transform: rotate(-10deg);
transform-origin: left bottom;
font-size:48px;
position: absolute
}

span.mvv1{
top:-50px;
left: 100px
}

span.mvv2{
top:-50px;
left: 100px
}

span.mvv3{
top:-50px;
left: 100px
}

span.mvv4{
font-family: 'Rotters';
display: block;
font-weight: 200;
color: #00a0e6;
transform: rotate(-10deg);
transform-origin: left bottom;
font-size:80px;
position: absolute;
bottom:-50px;
right: 0px
}

h2.small{
font-size:18px;
line-height: 1.4
}

p.mvv_txt{
font-family: "Noto Serif JP", serif;
line-height: 1.8;
font-weight: 600;
}

p.mvv_txt span{
background: #fffc00
}

h4.mvv{
font-size:22px;
margin-bottom: 20px
}

div.mvv_wrapper{
position: relative;
}

div.mvv_list{
display: flex;
align-items: center;
margin-bottom: 20px;
position: relative;
z-index: 1
}

p.mvv_list{
width: 60px;
height: 60px;
border-radius: 50%;
background: #1e4d90;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center
}

p.mvv_list img{
width: 26px
}

article.mvv_list{
width: calc(100% - 70px)
}

h3.mvv_list{
color: #1e4d90;
font-size: 20px;
line-height: 100%;
margin-bottom: 5px;
font-family: "Noto Serif JP", serif;
font-weight: 800;
}

h5.mvv_list{
color: #0d0409;
font-size: 13px;
font-weight: 500;
text-align: justify
}

/*-------------------interview--------------------*/

h4.interview{
width: 94%;
margin: 0px auto;
font-family: 'Eurostile';
color: #00a0e6;
font-weight: 500;
font-size: 14px
}

h2.interview{
width: 94%;
margin: 0px auto;
font-family: 'Impact';
font-weight: 100;
color: #00a0e6;
font-size:30px
}

section.interview{
width: 94%;
position: relative;
margin: 0px auto;
}

section.interview:before{
content: "";
width: 60%;
height: 300px;
position: absolute;
background: #ffe400;
left: -3%;
top:300px;
z-index: -1
}

section.interview:after{
content: "";
width: 30%;
height: 300px;
position: absolute;
background: #ffe400;
right: -3%;
top:1200px;
z-index: -1
}

ul.interview_top{
display: block;
}

ul.interview_top li{
display: block;
}

li.interview_top_left{
width: 100%;
}

p.interview_image{
width: 82%;
aspect-ratio: 4/5;
border-radius: 15px;
box-shadow: 10px 10px 0px #06a1e7;
overflow: hidden;
margin: 0px auto 20px auto
}

p.interview_image img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center
}

li.interview_top_right{
width: 90%;
margin: 0px auto;
}

ul.interview{
width: 100%;
padding: 10px 0px;
display: table;
table-layout: fixed;
border-bottom: dotted 1px #dcdcdc;
}

ul.interview li{
display: table-cell;
font-size: 15px
}

ul.interview:last-of-type{
margin-bottom: 20px;
}

li.interview_left{
width: 30%;
color: #06a1e7;
font-weight: 600
}

p.interview_txt{
line-height: 2;
text-align: justify
}

article.interview_page{
padding: 60px 0px
}

p.interview_page{
font-size: 20px;
font-family: 'Eurostile';
color: #00a0e6;
margin-bottom: 20px
}

article.interview_title{
width: 94%;
margin: 0px auto;
padding: 40px 0px;
position: relative;
}

h3.interview_page{
border-radius: 8px;
padding: 2px 10px;
background: #00a0e6;
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 10px
}

article.interview_q{
width: 94%;
}

article.first{
margin: 0px auto 40px auto
}

article.second{
margin: 0px auto 40px auto
}

article.third{
margin: 0px auto 40px auto
}

h3.interview_q{
font-size: 18px;
color:  #00a0e6;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
line-height: 1.3
}

h3.interview_q span{
font-size: 24px;
color: #ffe400;
display:block
}

p.interview_q{
line-height: 1.8;
text-align: justify
}

section.interview_schedule{
width: 94%;
margin: 0px auto;
padding-bottom: 60px;
position: relative
}

section.interview_schedule:before{
content: "";
width: 60%;
height: 300px;
position: absolute;
background: #ffe400;
left: -3%;
top:-20px;
z-index: -1
}

div.interview_schedule{
margin-bottom: 40px
}

h3.interview_schedule{
font-size: 32px;
font-family: 'Eurostile';
color: #00a0e6;
margin-bottom: 5px;
}

h4.interview_schedule{
font-weight: 600;
color: #000;
font-size: 16px;
margin-bottom: 40px
}

article.interview_schedule{
width: 94%;
display: flex;
align-items: center;
flex-wrap: wrap;
padding-bottom: 10px
}

p.interview_schedule{
width: 50px;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 40px
}

p.interview_schedule:after{
content: "";
width: 3px;
height: 150px;
background: #8d8d8d;
position: absolute;
top:50%;
}

p.last:after{
content: "";
width: 4px;
height: 0px;
position: absolute;
top:50%;
}

p.interview_schedule span{
color: #00a0e6;
font-size: 18px;
position: relative;
z-index: 1
}

div.interview_schedule_wrap{
width: 80%;
display: flex;
align-items: center
}

span.interview_schedule{
width: 80px;
background: #00a0e6;
height: 32px;
line-height: 32px;
color: #fff;
text-align: center;
font-family: 'Impact';
font-weight: 200;
border-radius: 5px;
font-size: 16px;
margin-right: 15px;
display: inline-block
}

h5.interview_schedule{
font-weight: 700;
font-size: 13px;

}

h6.interview_schedule{
width: 80%;
font-size: 13px;
margin: 0px 0px 0px auto;
font-weight: 400;
text-align: justify
}

a.apply{
width: 90%;
display: block;
height: 60px;
border-radius: 30px;
text-align: center;
border:solid 2px #00a0e6;
font-weight: 700;
font-size: 14px;
margin: 0px auto 60px auto;
line-height: 60px;
position: relative
}

a.apply:after{
content: "";
width: 44px;
height: 44px;
background: #00a0e6 url(../img/icon/apply_arrow.png) no-repeat center;
background-size: 40%;
border-radius: 50%;
position: absolute;
top:50%;
transform: translateY(-50%);
right: 7px
}

/*--------------------career_pass--------------------*/

section.career{
width: 94%;
margin: 0px auto 30px auto;
padding: 20px
}

section.blue_frame,a.blue_frame{
border:solid 1.5px #22539b
}

section.red_frame,a.red_frame{
border:solid 1.5px #ff3674
}

section.green_frame,a.green_frame{
border:solid 1.5px #008f3d
}

section.sky_frame,a.sky_frame{
border:solid 1.5px #00baff
}

a.blue_frame{
color: #22539b;
}

a.blue_frame:after{
background: url(../img/icon/triangle.png) no-repeat center;
}

a.red_frame{
color: #ff3674;
}

a.red_frame:after{
background: url(../img/icon/red.png) no-repeat center;
}

a.green_frame{
color: #008f3d;
}

a.green_frame:after{
background: url(../img/icon/green.png) no-repeat center;
}

a.sky_frame{
color: #00baff;
}

a.sky_frame:after{
background: url(../img/icon/sky.png) no-repeat center;
}

h2.career{
font-size:24px;
padding-bottom: 10px;
margin-bottom: 20px
}

h2.blue_frame{
color: #22539b;
border-bottom: solid 1.5px #22539b
}

h2.red_frame{
color: #ff3674;
border-bottom: solid 1.5px #ff3674
}

h2.green_frame{
color: #008f3d;
border-bottom: solid 1.5px #008f3d
}

h2.sky_frame{
color: #00baff;
border-bottom: solid 1.5px #00baff
}

ul.career{
width: 100%;
display: table;
table-layout: fixed;
margin-bottom: 20px
}

ul.career li{
display: table-cell;
vertical-align: top
}

li.career_left{
width: 30px;
color: #fff;
padding-top: 50px
}

h5.career_left{
writing-mode: vertical-rl;
margin: 0px auto;
text-align: center;
width: max-content;
font-size: 16px;
letter-spacing: 0.2em;
white-space: nowrap;
}

li.blue_frame{
background: #22539B;
background: linear-gradient(180deg,rgba(34, 83, 155, 1) 0%, rgba(54, 61, 161, 1) 20%, rgba(84, 32, 154, 1) 35%, rgba(133, 34, 148, 1) 65%, rgba(154, 32, 98, 1) 75%, rgba(203, 30, 30, 1) 100%);
}

li.green_frame{
background: #008F3D;
background: linear-gradient(180deg,rgba(0, 143, 61, 1) 0%, rgba(0, 90, 38, 1) 20%, rgba(0, 99, 124, 1) 35%, rgba(0, 9, 124, 1) 65%, rgba(114, 0, 124, 1) 75%, rgba(203, 30, 30, 1) 100%);
}

li.career_right{
padding-left: 20px
}

article.career_right{
border-bottom: solid 1px #000;
padding-bottom: 20px;
margin-bottom: 20px
}

li.career_right article.career_right:last-child{
border-bottom: none;
margin-bottom: 0px
}

h4.step{
font-size:24px;
font-family: 'Tw';
margin-bottom: 10px
}

p.step{
line-height: 1.4;
font-size: 14px
}

a.career{
width: 300px;
height: 60px;
margin: 0px auto;
display: block;
line-height: 60px;
font-size:15px;;
font-weight: 600;
position: relative;
text-align: center
}

a.career:after{
content: "";
width: 16px;
height: 16px;
background-size: cover;
position: absolute;
top:50%;
transform: translateY(-50%);
right: 30px
}

p.career_right{
width: 150px;
height: 26px;
line-height: 26px;
margin-bottom: 20px;
color: #fff;
text-align: center;
}

p.comingsoon{
color: #00baff;
text-align: center;
font-family: 'Impact';
font-weight: 100;
font-size:38px;
margin-bottom: 20px
}

/*--------------------DATA ABOUT--------------------*/

section.data_about{
background: #09FEFB;
padding: 30px 0px;
background: linear-gradient(125deg,rgba(9, 254, 251, 1) 0%, rgba(9, 211, 254, 1) 50%, rgba(9, 142, 254, 1) 100%);
position: relative
}

i.contents{
font-family: "hiragino-kaku-gothic-pron", sans-serif;
}

i.contents small{
display: block
}

div#particles-js{
width: 100%;
height: 100%;
position: absolute;
top:0px;
left: 0px;
}

canvas{
width: 100%;
height: 100%;
position:absolute;
top:0;
right:0;
z-index:0;
}

article.data_about{
width: 94%;
margin: 0px auto 30px auto;
position: relative;
z-index: 1
}

h3.data_about{
width: 150px;
background: #000;
padding: 2px 0px 2px 5px;
color: #fff;
font-size:16px;
margin-bottom: 20px
}

div.data_about{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

p.data_about{
border-radius: 15px;
overflow: hidden;
background: #fff
}

/*--------------------privacy--------------------*/

p.content_lead{
width: 94%;
margin: 20px auto;
font-size: 13px;
font-weight: 500;
margin-bottom: 40px;
line-height: 1.8;
}

div.contents {
width: 94%;
margin: 0px auto
}

h3.privacy{
font-size: 20px;
font-family: "Noto Serif JP", serif;
font-weight: 600;
margin-bottom: 30px;
position: relative
}

h4.privacy{
font-weight: 500;
font-size:12px;
margin-bottom: 30px;
line-height: 1.8
}


section.contact{
width: 94%;
margin: 0px auto;
margin-bottom: 60px
}

ul.contact{
width: 100%; 
display: block;
}

ul.contact:last-of-type{
margin-bottom: 40px;
}

li.contact_left{
width: 100%;
font-size:15px;
font-weight: 600;
}

span.contact_left{
font-size:13px;
background: #205299;
color:#fff;
padding: 7px 12px 7px 12px;
margin-left: 10px;
}

li.contact_right{
width: 100%;
border-bottom: solid 1px #fff;
padding: 20px 0px 20px 0px;
}

div.check{
width: 300px;
margin: 0px auto;
font-size:16px;
font-weight: 100;
margin-bottom: 40px;
}

a.complete{
width: 70%;
height: 50px;
display: block;

background: #28c3d1;
background-size: 22px;
-webkit-appearance: none;
border:none;
color:#fff;
border-radius: 5px;
text-align: center;
line-height: 50px;
margin-top: 20px
}

p.complete{
margin-bottom: 15px;
font-weight: 600
}

p.complete:last-of-type{
margin-bottom: 60px;
}

/*--------------------about--------------------*/

section.about_read{
width: 94%;
margin: 0px auto;
padding: 30px 0px
}

h2.about_page{
width: max-content;
font-size: 22px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
display: flex;
align-items: center;
margin-bottom: 40px;
white-space: nowrap;
position: relative
}

h2.about_page strong{
font-size: 22px;
background: linear-gradient(to right, #098efe, #09fefb);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
z-index: 1
}

h2.about_page strong:before{
content: "";
width: 110px;
height: 2px;
background: #003f92;
position: absolute;
left: 0px;
bottom: -5px;
z-index: 1
}

h2.about_page strong:after{
content: "";
width: 100%;
height: 2px;
background: #a6a6a6;
position: absolute;
left: 0px;
bottom: -5px;
z-index: 0
}

h2.about_page span{
font-size: 22px;
position: relative;
z-index: 1
}

h2.about_page span:after{
content: "";
width: 100%;
height: 2px;
background: #a6a6a6;
position: absolute;
left: 0px;
bottom: -5px;
}

h2.about_page i{
font-size: 33px;
color: #fcee62;
font-family: "Jost", sans-serif;
position: absolute;
font-weight: 500;
font-style: italic;
z-index: 0;
right: -20px;
top:5px;
transform: rotate(-5deg)
}

a.about_page{
width: 100%;
display: block;
padding: 25px;
box-shadow: 0 0 24px rgba(0, 63, 146, 0.34);
border-radius: 15px; 
position: relative
}

a.about_page:after{
content: "";
width: 40px; 
height: 30px; 
background: linear-gradient(to right, #6af7ff, #0084ff);
clip-path: polygon(0 29.6%, 58.3% 29.6%, 58.3% 0, 100% 50%, 58.3% 100%, 58.3% 70.4%, 0 70.4%);
position: absolute;
right: 20px;
bottom: 20px
}

h3.about_page{
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 16px;
display: flex;
align-items: center;
gap:20px;
margin-bottom: 15px
}

h3.about_page strong{
font-size: 16px;
font-weight: 700;
}

section.about_number{
padding: 30px 3%;
background: #fbeb4f;
}

i.wh{
color: #fff!important;
}

div.about_number{
margin: 0px auto;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 15px
}

a.about_number{
aspect-ratio:2/2.4;
background: #fff;
border-radius: 15px;
box-shadow: 0 0 12px rgba(0, 63, 146, 0.34);
display: flex;
align-items: center;
justify-content: center
}

h3.about_number{
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
font-size: 20px;
position: relative;
text-align: center;
margin-bottom: 15px
}

h3.about_number:after{
content: "";
width: 80px;
height: 4px;
display: block;
margin: 5px auto;
background: linear-gradient(213deg,rgba(106, 247, 255, 1) 0%, rgba(0, 132, 255, 1) 100%);
}

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

section.about_slogan{
padding: 30px 3% 60px 3%;
}

div.about_slogan{
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
}

a.about_slogan{
aspect-ratio: 1 / 1;
background: #00a0e6;
position: relative;
color: #fff;
padding: 20px;
margin-bottom: 10px
}

a.about_slogan:before{
content: "＋";
color: #fff;
font-size: 30px;
position: absolute;
font-weight: 100;
left:20px;
bottom: 0px
}

a.about_slogan:nth-of-type(2),
a.about_slogan:nth-of-type(4){
background: #003f92;
left: -10px;
top: 40px;
}

a.about_slogan:nth-of-type(1){ z-index: 1; }
a.about_slogan:nth-of-type(2){ z-index: 2; }
a.about_slogan:nth-of-type(3){ z-index: 3; }
a.about_slogan:nth-of-type(4){ z-index: 4; }

h3.about_slogan{
font-size: 36px;
font-family: "Jost", sans-serif;
line-height: 100%;
font-weight: 500;
}

h3.about_slogan i{
display: block;
font-family: "Noto Serif JP", serif;
font-weight: 800;
font-size: 12px;
line-height: 100%;
padding-top: 5px
}

div.about_personality{
display: block;
}

a.about_personality{
width: max-content;
height: 56px;
padding: 0px 30px;
color: #fff;
background: #00a0e6;
border-radius: 28px;
line-height: 56px;
gap: 10px;
display: flex;
align-items: center;
font-weight: 600;
margin: 0px auto 20px auto;
}

a.about_personality:after{
content: "";
width: 20px;
height: 20px;
background: url(../img/icon/arrow_w.png) no-repeat center;
background-size: 100%
}

img.about_personality{
width: 100%;
border-radius: 20px
}

a.about_carrier{
aspect-ratio: 1 / 1.2;
border-radius: 15px;
box-shadow: 4px 4px 8px #dcdcdc;
overflow: hidden
}

a.about_carrier:nth-of-type(1){
background: #CB1E1E;
background: linear-gradient(150deg,rgba(203, 30, 30, 0.65) 0%, rgba(154, 32, 98, 0.65) 25%, rgba(133, 34, 148, 0.65) 45%, rgba(84, 32, 154, 0.65) 65%, rgba(54, 61, 161, 0.65) 80%, rgba(34, 83, 155, 0.65) 100%);
}

a.about_carrier:nth-of-type(2){
background: #FF004F;
background: linear-gradient(-146deg,rgba(255, 0, 79, 0.65) 0%, rgba(255, 0, 0, 0.65) 45%, rgba(187, 0, 0, 0.65) 100%);
}

a.about_carrier:nth-of-type(3){
background: #008F3D;
background: linear-gradient(-146deg,rgba(0, 143, 61, 0.65) 0%, rgba(0, 99, 124, 0.65) 100%);
}

a.about_carrier:nth-of-type(4){
background: #015EEA;
background: linear-gradient(-115deg,rgba(1, 94, 234, 0.65) 0%, rgba(0, 192, 250, 0.65) 100%);
}

article.about_carrier{
padding: 12px;
color: #fff;
}

h3.about_carrier{
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 15px;
}

/*--------------------interview_list--------------------*/

section.interview_list{
width: 94%;
margin: 0px auto;
padding-bottom: 30px;
display: flex;
flex-wrap: wrap;
gap: 4%
}

h3.interview_list_department{
width: 100%;
margin: 0px auto 20px auto;
background: #20529a;
color: #fff;
font-weight: 700;
font-size: 18px;
padding: 2px 0px 2px 20px
}

a.interview_list{
width: 48%;
display: inline-block;
box-shadow: 4px 4px 8px #dcdcdc;
border-radius: 15px;
padding: 10px;
position: relative;
margin-bottom: 20px;
}

a.interview_list:nth-of-type(2n){


}


div.interview_list_image{
width: 100%;
position: relative;
aspect-ratio: 4 / 4.2;
}

div.interview_list_image img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center
}

article.interview_list{
position: absolute;
left: 15px;
bottom: 0px
}

article.interview_list_right{
width: 100%
}

h3.interview_list{
font-size:16px;
color: #fff;
text-shadow: 1px 1px 2px #999;
line-height: 100%;
transform: skew(-5deg);
font-family: "Inter", sans-serif;
margin-bottom: 5px
}

h4.interview_list{
font-size:22px;
color: #fff;
text-shadow: 1px 1px 2px #999;
margin-bottom: 15px;
transform: skew(-5deg);
font-family: "Inter", sans-serif;
line-height: 100%
}

h5.interview_list_position{
width: max-content;
height: 20px;
line-height: 20px;
padding: 0px 10px;
border-radius: 10px;
font-size: 10px;
background: #00a0e6;
color:#fff;
margin-bottom: 5px;
margin-top: 20px
}

h3.interview_list_name{
font-size:20px
}

h3.interview_list_roma{
font-size:11px;
font-family: "Jost", sans-serif;
color: #666;
font-weight: 500;
margin-bottom: 10px
}

p.interview_list{
font-size:11px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 10px;
color: #666
}

p.apply{
width: 100%;
height: 40px;
border-radius: 20px;
border:solid 1px #00a0e6;
font-weight: 700;
font-size: 11px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

p.apply:after{
content: "";
width: 20px;
height: 20px;
background: #00a0e6 url(../img/icon/apply_arrow.png) no-repeat center;
background-size: 50%;
border-radius: 50%;
}

/*--------------------faq--------------------*/

section.faq{
width: 94%;
margin: 0px auto;
background: #f9f0e2;
border-radius: 50px;
padding: 30px 0px;
margin-bottom: 60px
}

article.faq{
width: 90%;
margin: 0px auto 20px auto;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
}

article.faq:last-of-type{
margin-bottom: 0px
}

h3.faq{
background: #00a0e6;
padding: 8px 45px 8px 20px;
border-radius: 10px;
color: #fff;
font-size:16px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
position: relative
}

h3.faq:hover{
cursor: pointer
}

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

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

h3.faq span{
width: 50px;
font-size:20px;
}

p.faq{
border-radius: 10px;
font-size:13px;
background: #fff;
padding: 20px;
display: none;
line-height: 1.8
}

a.faq{
color: #20529a;
text-decoration: underline
}

/*--------------------job--------------------*/

section.jpb{
padding: 40px 0px;
width: 94%;
margin: 0px auto;
}

h3.job{
width: 100%;
background: #20529a;
padding: 10px 0px 10px 20px;
color: #fff;
font-size:18px;
}

ul.jpb_tab{
width: 96%;
margin: 0px auto 30px auto;
display: flex;
align-items: center;
gap: 3px
}

ul.jpb_tab li{
width: calc(100% / 3);
text-align: center;
background: #20529a;
color: #fff;
padding: 10px 0px;
font-weight: 600;
border-bottom: solid 2px #20529a;
font-size: 14px;
}

ul.jpb_tab li:hover{
cursor: pointer;
text-decoration: underline
}

li.selected{
background: #fff!important;
color: #444!important;
}

label.job{
width: 300px;
height: 50px;
border-radius: 5px;
display: block;
border:solid 2px #dcdcdc;
overflow: hidden;
margin: 0px auto;
position: relative;
margin-bottom: 30px
}

label.job:after{
content: "▼";
position: absolute;
color:#20529a;;
top:50%;
transform: translateY(-50%);
right: 20px
}

ul.job{
display: block;
}

ul.job:last-of-type{
border-bottom: solid 1px #dcdcdc;
}

ul.job li{
display: block;
padding: 15px 0px;
font-size: 15px
}

li.job_left{
text-align: center;
border-right: solid 1px #dcdcdc;
border-left: solid 1px #dcdcdc;
border-bottom: solid 1px #dcdcdc;
color: #20529a;
font-weight: 700
}

li.job_right{
width: 100%;
padding-left: 20px!important;
border-left: solid 1px #dcdcdc;
border-bottom: solid 1px #dcdcdc;
border-right: solid 1px #dcdcdc;
line-height: 1.6
}

a.job{
color: #20529a;
text-decoration: underline;
font-weight: 700
}

span.red{
color: #ff0000;
font-weight: 700
}

#tax_consultant,#tax_assistant,#labor_consultant,#labor_assistant,#t2,#entry_form {
scroll-margin-top: 150px; 
}

section.selection_process{
width: 94%;
margin: 0px auto 30px auto;
border:solid 1px #20529a;
}

h3.selection_process{
width: 100%;
background: #20529a;
padding: 10px 0px 10px 20px;
color: #fff;
font-size:16px;
text-align: center;
margin-bottom: 50px
}

article.selection_process{
width: 90%;
margin: 0px auto;
text-align: center;
}

article.selection_process:after{
content: "";
display: block;
width: 30px;
height: 30px;
background: url(../img/icon/triangle_under.png) no-repeat center;
background-size: cover;
margin: 20px auto
}

article.selection_process:last-of-type:after{
background: none;
}

h4.selection_process{
padding: 15px 0px 15px 0px;
background: #00a0e6;
color: #fff;
font-size: 16px
}

h6.selection_process{
padding: 15px 0px 15px 0px;
font-size: 16px;
border: solid 1px #dcdcdc;
border-top:none
}

a.selection_process,span.selection_process{
font-size: 16px;
color: #dc3545
}

section.entry_form{
width: 94%;
margin: 0px auto 30px auto;
}

ul.entry_form{
width: 100%;
display: block
}

ul.entry_form:last-of-type{
margin-bottom: 50px
}

ul.entry_form li{
display: block
}

li.contact_left{
font-weight: bold;
background: #efefef;
border-bottom: solid 1px #fff;
padding: 15px 0px 15px 15px;
text-align:left
}

li.contact_right{
border-bottom: solid 1px #efefef;
padding: 15px 0px 15px 0px;
}

div.submit_area{
width: 100;
margin: 0px auto;
display: flex;
justify-content: center;
gap:30px
}

div.check{
width: 100%;
margin: 0px auto;
font-size:16px;
font-weight: 100;
margin-bottom: 40px;
}

label.select{
width: max-content;
height: 50px;
border-radius: 5px;
display: block;
background: #fff;
overflow: hidden;
border:solid 1px #dcdcdc;
color: #000
}

a.checkbox{
font-size:16px;
}


label.radio{
margin-right: 20px
}

/*--------------------job--------------------*/

p.message_lead{
width: 94%;
margin: 20px auto 0px auto;
font-size: 15px;
font-weight: 500;
font-family: "Kiwi Maru", serif;
font-weight: 500;
font-style: normal;
}

div.greeting{
width:100%; 
}

section.message{
overflow: hidden;
padding-bottom: 40px
}

p.greeting_image{
width: 90%;
aspect-ratio: 5 / 4;
margin: 0px auto 30px auto;
border-radius: 15px;
position: relative;
z-index: 0;
}

p.greeting_image img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
object-position: top center
}

.greeting_image::before {
content: "";
position: absolute;
right: -60px; 
top: 20px; 
width: 120px; 
height: 120px; 
background: #00a0e6; 
opacity: 0.3;
border-radius: 50%; 
z-index: 1; 
}

.greeting_image::after {
content: "";
position: absolute;
left: 100px; 
bottom: -50px; 
width: 70px; 
height: 70px; 
opacity: 0.6;
background: #00a0e6; 
border-radius: 50%; 
z-index: -1; 
}

article.greeting{
width: 90%;
margin: 0px auto;
box-shadow: 4px 4px 8px #dcdcdc;
padding: 30px 20px 30px 20px;
border-radius: 15px;
background: #fff;
position: relative;
z-index: -1
}

article.greeting::before {
content: "";
position: absolute;
right: -40px; 
top: 100px; 
width: 20px; 
height: 20px; 
background: #00a0e6; 
border-radius: 50%; 
z-index: -1; 
}

article.greeting::after {
content: "";
position: absolute;
right: -70px; 
bottom: 100px; 
opacity: 0.4;
width: 80px; 
height: 80px; 
background: #00a0e6; 
border-radius: 50%; 
z-index: -1; 
}

h3.greeting{
font-size: 17px;
margin-bottom: 20px
}

p.greeting{
font-size:14px;
line-height: 1.8;
margin-bottom: 40px;
font-family: "Kiwi Maru", serif;
font-weight: 500;
font-style: normal;
}

div.message{
width: 100%;
display: flex;
align-items: center;
gap: 20px;
justify-content: right
}

h6.message{
font-size: 12px
}

h5.message{
font-size: 22px;
font-family: "Kiwi Maru", serif;
font-weight: 400
}

/*--------------------company--------------------*/

section.company{
width: 94%;
margin: 0px auto;
padding-bottom: 40px
}

/*--------------------howto--------------------*/

section.howto{
background: url(../img/howto/top.jpg) no-repeat center;
background-size: cover;
margin-bottom: 60px;
position: relative;

}

section.howto:after{
content: "";
position: absolute;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background: linear-gradient(0deg,rgba(79, 172, 254, 0.29) 0%, rgba(0, 242, 254, 0.29) 100%);
width: 110vw;
aspect-ratio: 5 / 4;
bottom: -250px;
left: -100px;
z-index: -1
}

p.howto_lead{
width: 94%;
margin: 30px auto;
font-weight: 600;
color: #000;
font-size: 15px;
line-height: 1.8
}

article.howto{
width: 94%;
margin: 0px auto
}

h3.howto{
font-weight: 600;
color: #000;
font-size: 20px;
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px
}

h3.howto span{
background: #20529a;
font-weight: 600;
color: #000;
font-size: 18px;
font-family: 'Impact';
font-weight: 100;
color: #fff;
padding: 3px 5px;
}

main.howto{
overflow: hidden
}

section.howto_block{
width: 90%;
margin: 0px auto;
margin-bottom: 40px;
position: relative;
border-radius: 15px;
background: #fff;
padding: 20px;
box-shadow: 4px 4px 8px #999
}

section.howto_block1:before{
content: "";
position: absolute;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background: linear-gradient(0deg,rgba(79, 172, 254, 0.29) 0%, rgba(0, 242, 254, 0.29) 100%);
width: 110vw;
aspect-ratio: 5 / 4;
right: -40vw;
top:250px
}

section.howto_block2:before{
content: "";
position: absolute;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background: linear-gradient(0deg,rgba(13, 204, 255, 0.29) 0%, rgba(71, 96, 255, 0.29) 100%);
top:-15vw;
width: 70vw;
aspect-ratio: 5 / 4;
left: calc((100% - 1200px) / 2);
}

section.howto_block3:before{
content: "";
position: absolute;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background: linear-gradient(0deg,rgba(99, 163, 255, 0.39) 0%, rgba(182, 220, 255, 0.39) 40%, rgba(114, 190, 255, 0.39) 100%);
top:-60px;
width: 90vw;
aspect-ratio: 5 / 4;
left: -30vw
}

h4.howto{
width: 100px;
display: flex;
align-items: center;
font-size: 18px;
position: relative;
margin-bottom: 20px;
z-index: 1;
display: flex;
gap: 10px;
white-space: nowrap
}

h4.howto span{
font-family: 'Impact';
color: #20529a;
writing-mode: horizontal-tb;
font-weight: 100;
border:solid 1px #20529a;
display: inline-block;
font-size: 18px;
padding: 0px 10px
}

h4.howto_catch{
width: max-content;
font-family: 'Notera';
color: #00a0e6;
position: absolute;
font-size: 50px;
z-index: 2;
font-weight: 200;
line-height: 40px;
opacity: 0.8
}

h4.first{
top:48%;
right: 0px;
transform: rotate(-8deg) translateY(-50%);
text-align: right;
}

h4.second{
right: 0px;
transform: rotate(-8deg) ;
bottom: -60px
}

h4.third{
top:48%;
right: 0px;
transform: rotate(-8deg) translateY(-50%);
text-align: right;
}

div.howto_block_image{
width: 100%;
border-radius: 15px;
aspect-ratio: 16 / 9;
position: relative;
z-index: 1
}

div.howto_block_image img{
border-radius: 15px;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center
}

p.howto_block_txt,div.howto_block_txt{
font-size: 13px;
line-height: 1.8;
position: relative;
padding: 15px
}

#t2 {
scroll-margin-top: 350px;
}