@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@700&display=swap');

body{
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
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;
color:#000;
background: #fff;
font-feature-settings: "palt";
}

body {
animation: fadeIN 0.4s ease 0s 1 normal;
-webkit-animation: fadeIn 0.4s ease 0s 1 normal;
}

@keyframes fadeIN {
0% {opacity: 0}
100% {opacity: 1}
}

*{
margin:0px;
padding:0px;
box-sizing:border-box;
outline: 0;
}

ul,li{
list-style:none;
}

ul{
width:100%;
display: table;
table-layout: fixed;
}

li{
display: table-cell;
vertical-align: middle
}

img{
width: 100%;
max-width:100%;
display:block;
}

a{
color:#000;
text-decoration: none;
}

div.contener{
width: 100%;
max-width: 700px;
padding-top: 80px;
background: #fff;
margin: 0px auto
}

/*--------------------nav--------------------*/

nav.nav{
width: 100%;
height: 60px;
position: fixed;
top:0px;
left: 50%;
transform: translateX(-50%);
z-index: 11;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
box-shadow: 2px 2px 4px #dcdcdc
}

div.menu-trigger{
width: 70px;
height: 60px;
position: relative;
}

a.menu-trigger,
a.menu-trigger span {
display: inline-block;
transition: all .4s;
position: relative;
}

a.menu-trigger {
position: absolute;
width: 32px;
height: 16px;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

a.menu-trigger span {
position: absolute;
right: 0;
width: 100%;
height: 1px;
background: #000;
}

a.menu-trigger span:nth-of-type(1) {
top: 0;
}
a.menu-trigger span:nth-of-type(2) {
top: 7px;
}
a.menu-trigger span:nth-of-type(3) {
bottom: 0;
}

a.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(7px) rotate(-45deg);
transform: translateY(7px) rotate(-45deg);

}

a.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}

a.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-7px) rotate(45deg);
transform: translateY(-7px) rotate(45deg);
}

.menuIn{
animation-fill-mode:both;
animation-duration:0.5s; 
animation-name: menuIn;
display: block!important;
}
 
@keyframes menuIn {
0% { opacity: 0;}
100% {opacity: 100;}
}

div.news_page_share{
display: flex;
align-items: center;
gap: 18px;
padding-left: 5%
}

a.news_page_share{
display: block;
height: 18px;
}

a.news_page_share img{
height: 18px;
}

/*--------------------header--------------------*/

header.header{
width: 100%;
margin: 0px auto;
position: relative;
margin-bottom: 12px;
padding: 20px 0px
}

header.header:after{
content: "";
position: absolute;
bottom:-12px;
left: 0px;
width: 100%;
height: 12px;
background: #efefef
}

div.header_slide{
overflow: hidden
}

h2.header{
width: 94%;
margin: 0px auto;
font-size: 20px
}

p.header{
width: 94%;
margin: 0px auto;
font-size: 12px;
color: #767676;
font-weight: 500;
margin-bottom: 15px
}

hr.header{
border:none;
width: 100%;
height: 1px;
background: #efefef;
margin-bottom: 20px
}

h1.header{
width: 94%;
margin: 0px auto 20px auto;
font-size: 18px
}

article.header{
width: 94%;
margin: 0px auto;
border:solid 1px #e6e6e6
}

h3.header{
background: #e6e6e6;
font-size: 14px;
padding: 3px 0px 3px 10px
}

div.header{
padding: 10px 10px 0px 10px
}

article.header_read{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px
}

article.header_read:before{
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
background: #1c1c1c url("../recruit/img/icon/check.svg") no-repeat center;
background-size: 50%;
}

h4.header_read{
width: calc(100% - 24px);
font-size: 13px
}

/*--------------------interior--------------------*/

section.recruit_header{
width: 94%;
margin: 0px auto;
padding-top: 20px
}

header.header:after{
content: "";
position: absolute;
bottom:-12px;
left: 0px;
width: 100%;
height: 12px;
background: #efefef
}

h3.title{
font-size: 20px;
font-weight: 700;
margin-bottom: 15px;
}

/*--------------------interior--------------------*/

section#interior{
width: 94%;
margin: 0px auto;
padding: 30px 0px;
background: url(../recruit/img/interior/back.jpg) no-repeat center;
background-size: cover;
position: relative
}

section#interior:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top:0px;
left: 0px;
background: rgba(0,0,0,0.8);
mix-blend-mode:multiply;
z-index: 0
}

h2.title{
position: relative;
z-index: 1;
margin-bottom: 20px
}

div.interior{
width: 92%;
margin: 0px auto;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}

/*--------------------process--------------------*/

section#process{
width: 94%;
margin: 0px auto;
padding: 30px 0%;
background: #000;
}

article.process{
width: 92%;
margin: 0px auto 15px auto;
position: relative
}

article.process:after{
content: "";
width: 4px;
height: 15px;
background: #b59042;
position: absolute;
left: 60px;
bottom: -15px
}

article.process:nth-of-type(7){
margin-bottom: 20px
}

article.process:nth-of-type(7):after{
content: "";
background: none;
}

h3.process{
background: #966911;
font-size: 18px;
background: linear-gradient(90deg,rgba(150, 105, 17, 1) 0%, rgba(240, 215, 137, 1) 47%, rgba(240, 215, 137, 1) 55%, rgba(148, 104, 21, 1) 100%);
font-family: "Zen Old Mincho", serif;
font-weight: 700;
font-style: normal;
padding: 5px 0px 5px 10px
}

h6.process{
background: #fff;
text-align: justify;
padding: 12px;
font-size: 13px;
font-weight: 500
}

img.process_logo{
width: 40%;
margin: 0px auto;
}

/*--------------------process--------------------*/

section#information{
padding: 20px 3%;
background: #fff;
position: relative;
margin-top: 32px
}

section#information:before{
content: "";
width: 100%;
height: 12px;
background: #efefef;
position: absolute;
left: 0px;
top: -12px;
}

div.information{
border:solid 1px #dcdcdc;
border-radius: 5px;
padding: 20px 15px
}

ul.information{
font-size: 13px;
margin: 0px auto 20px auto;
border-bottom: solid 1px #dcdcdc;
padding-bottom: 20px
}

li.information_left{
width: 30%;
}

li.information_right{
width: 70%
}

a.information{
text-decoration: underline
}

a.google_maps{
display: block;
margin-top: 10px;
text-decoration: underline
}

div.information_sns{
display: flex;
align-items: center;
gap: 12px
}

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

/*--------------------form--------------------*/

section#form{
padding: 30px 3%;
background: #fff;
}

div#form{
padding: 30px 0px
}

div.form{
padding: 20px 20px;
border-top:solid 1px #dcdcdc;
border-bottom: solid 1px #dcdcdc;
}

ul.post{
width: 100%;
display: flex;
align-items: center;
gap: 10px;
}

li.post{
width: 100%;
min-width: calc(50% - 10px);
display: block
}

h3.form{
font-weight: 600;
margin-bottom: 15px
}

h3.form span{
font-weight: 400
}

a.form{
margin: 0px auto;
display: block;
font-weight: 600;
text-align: center;
font-size: 20px;
color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
letter-spacing: 0.2px
}

a.tel{
background: #0069d1;
padding: 8px 0px;
}

a.tel:before{
content: "";
width: 22px;
height: 22px;
background: url(../recruit/img/icon/tel.svg) no-repeat center;
background-size: cover
}

a.line{
background: #4cc99e;
font-size: 16px;
padding: 12px 0px;
}

a.line:before{
content: "";
width: 22px;
height: 22px;
background: url(../recruit/img/icon/line.svg) no-repeat center;
background-size: cover
}

div.post{
margin-bottom: 30px
}

p.post_title{
font-size: 13px;
font-weight: 600;
color: #444;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}

span.required{
background: #f44664;
font-size: 11px;
font-weight: 600;
border-radius: 3px;
padding: 1px 4px;
color: #fff
}

label.post{
width: 100%;
display: flex;
height: 48px;
padding: 0px 15px;
border:1px solid #eaeaea;
border-radius: 5px;
align-items: center;
font-size: 13px;
gap: 8px
}

.post_radio {
width: 1.2rem;
height: 1.2rem;
border: .1rem solid #eaeaea; 
border-radius: 50%;
background-color: #fff;
appearance: inherit;
cursor: pointer;
box-sizing: border-box; 
display: flex;
justify-content: center;
align-items: center;
position: relative; 
}

.post_radio:checked {
border-color: #007bff; 
}

.post_radio:checked::after {
content: ''; 
position: absolute;
width: 0.7rem; 
height: 0.7rem;
border-radius: 50%;
background-color: #007bff; 
}

input[type="text"],input[type="email"],input[type="tel"]{
width: 100%;
height: 100%;
border:none;
padding-left: 10px;
}

select{
width: 100%;
height: 100%;
border:none;
}

textarea{
width: 100%;
border:none;
}

label.textarea{
width: 100%;
border:1px solid #eaeaea;
border-radius: 5px;
display: block;
overflow: hidden
}


li.post.short{
min-width: calc(100% / 3 - 10px)!important
}

span.post{
font-size: 14px
}

ul.post.interview li.post:nth-child(1){
min-width:40%!important;
}

ul.post.interview li.post:nth-child(2){
min-width:35%!important;
}

ul.post.interview li.post.reset{
min-width:20%!important;
}

.interview_label{
color:#aaa;
font-weight:bold;
margin-bottom:6px;
}

.reset_btn{
width:100%;
height:40px;
border:none;
border-radius:8px;
background:#e5e5e5;
color:#0066cc;
font-size:20px;
}

div.check{
width: 90%;
margin: 0px auto;
font-size:14px;
margin-bottom: 20px;
}

label.checkbox{
width: 20px;
height: 20px;
border:solid 1px #dcdcdc;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

input[type="checkbox"]{
width: 100%;
height: 100%;
border:none;
box-shadow: none;
border-radius: 0px;
}

a.checkbox{
text-decoration: underline
}

.u-btn--blue{
width: 100%!important;
background: #0069d1!important;
color: #fff;
font-size: 15px;
font-weight: 600;
border-radius: 5px;
height: 40px;
border:none
}

/*--------------------footer_contact--------------------*/

div.footer_contact{
width: 100%;
max-width: 700px;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 0px;
display: flex;
align-items: center;
z-index: 11;
background: #fff;
box-shadow:0 0 1rem #999;
}

a.footer_contact{
width: calc(100% / 3);
color: #000;
font-size: 11px;
text-align: center;
border-right: solid 1px #dcdcdc;
padding: 8px 0px 10px 0px
}

a.footer_contact:nth-of-type(3){
border-right: none
}

a.footer_contact img{
width: 26px;
display: block;
margin: 0px auto 5px auto
}

a.footer_contact span{
display: block;
font-size: 10px;
color: #444
}

footer.recruit_footer{
background: #1c1c1c;
padding: 20px 0px 120px 0px
}