@charset "UTF-8";

/* RESPONSIVE 
---------------------------------------------------------------------- */

/* ===========================================

 	PC向け表示設定
 

============================================== */
@media only screen and (min-width: 960px){	

/* firstView
============================================== */
#firstView .contentsWrap .head {
width: 60%;
}


}/* end */
@media only screen and (min-width: 770px){	

/* base
============================================== */
h1 {
font-size: clamp(28px, 3vw, 36px);
letter-spacing: 0.2em;
}
h2 {
font-size: clamp(22px, 3vw, 28px);
letter-spacing: 0.1em;
}
.pcBr {
display: block;
}


/* main
============================================== */
#container {
overflow: auto;
scroll-snap-type: y mandatory;
/*
height: 100vh;
*/
}
#header {
scroll-snap-align: end;
height: 5vh;
}
#firstView {
scroll-snap-align: start;
min-height: 85vh;
}
article > section {
scroll-snap-align: start;
height: 100vh;
}
#Recruit,
#Support,
#Request {
height: 100%!important;
}


/* header
============================================== */



/* banner
============================================== */
.banner ul {
width: 70%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.banner ul li {
width: calc(100%/2);
}


/* firstView
============================================== */
#firstView {
padding-right: 0;
padding-bottom: 0;
background-position: 50% 50%;
position: relative;
}
#firstView {
display: block;
}

/*
#firstView .contentsWrap  {
height: 100%;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-column-gap: 10%;
grid-row-gap: 0;
}
#firstView .term {
grid-area: 1 / 1 / 4 / 3; 
}

#firstView .limit {
grid-area: 4 / 1 / 8 / 4; 
}

#firstView .mainTxt {
grid-area: 1 / 4 / 7 / 9;
}
#firstView .applyBtn {
padding-left: 60px;
align-self: self-end;
grid-area: 7 / 4 / 8 / 9;
position: relative;
}
*/



#firstView .applyBtn {
width: 100%;
}
#firstView .applyBtn a {
margin-right: 0;
margin-left: auto;
width: 90%;
padding: 1.5em;
display: block;
text-align: center;
color: #ffffff;
font-weight: bold;
background-color: #133381;
position: relative;
right: 0;
bottom: 0;
}
#firstView .applyBtn a::before {
content: '';
min-width: 110px;
height: 100%;
background-image: url("img/firstview_txt_r02_bk.png");
background-size: cover;
background-repeat: no-repeat;
background-position: top 50% left 0 ;
display: block;
position: absolute;
top: 0;
left: -60px;
}




/* section
============================================== */
article > section .head {
padding-top: 80px;
padding-bottom: 120px;
}


/* Guide
============================================== */
#Guide .ulBlock {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#Guide .ulBlock .listBlock {
margin-bottom: 2%;
width: 26vw;
}
#Guide .ulBlock .listBlock figure {
margin-bottom: 15px;
}
#Guide .ulBlock .listBlock p {
font-size: clamp(16px, 3vw, 20px);
}


/* Guide Block 
====================== */
.guideBlock .head figure {
padding-right: 2%;
width: 55%;
}
.guideBlock .head .txtBlock {
width: 45%;
text-align: left;
}

/* Guide company
====================== */
#companyBlock .rinen {
margin: auto;
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#companyBlock .rinen dl {
width: 26vw;
}
#companyBlock .foot .wrap {
margin-right: 0;
margin-left: auto;
width: 53%;
display: block;
}



/* Guide business
====================== */
#businessBlock .contentsWrap {
padding: 2%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
}
#businessBlock .twoColumn {
width: calc(98%/2);
}
#businessBlock .twoColumn table {
width: 100%;
vertical-align: baseline;
}
#businessBlock .twoColumn table th,
#businessBlock .twoColumn table td {
font-size: clamp(10px, 3vw, 18px);
} 
#businessBlock .foot .wrap {
margin-right: auto;
margin-left: 0;
width: 50%;
display: block;
text-align: justify;
}



/* point
============================================== */
.point ul {
margin-right: auto;
margin-left: auto;
width: 80%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 15px;
grid-row-gap: 25px;
}

.point .point1 {
grid-area: 1 / 1 / 2 / 2; 
}
.point .point2 {
grid-area: 2 / 1 / 3 / 2;
}
.point .point3 {
 grid-area: 1 / 2 / 2 / 3; 
}
.point .point4 {
grid-area: 2 / 2 / 3 / 3;
}


/* Recruit
============================================== */
#Recruit .contentsWrap {
padding: 5%;
}
#Recruit .contentsWrap .wrap {
margin-right: 0;
margin-left: auto;
width: 45%;
display: block;
}
#Recruit h2 {
margin-bottom: 20px;
}
#Recruit h3 {
margin-bottom: 10px;
letter-spacing: 0.1em;
}
#Recruit .staff {
margin-bottom: 50px;
}

/* workStyle
============================================== */
#workStyle ul {
width: 75%;
}
#workStyle ul li {
width: 26vw;
}
#workStyle ul li.fullTime figcaption {
font-size: clamp(18px, 3vw, 20px);
}

/* workStyle worksBlock
====================== */
.worksBlock .head figure {
padding-right: 2%;
width: 55%;
}
.worksBlock .head .txtBlock {
width: 45%;
text-align: left;
}
.worksBlock .contentsWrap h3 {
padding-top: 80px;
}
.worksBlock .contentsWrap .lead {
padding-bottom: 120px;
}

.worksBlock .banner ul {
width: 100%;
}





/* Area
============================================== */
#Area ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#Area ul li {
margin-bottom: 2%;
width: 26vw;
}
#Area ul li .name {
margin-bottom: 10px;
border-bottom: 1px solid #000000;
}
#Area ul li .map {
margin-top: 10px;
}


/* Request
============================================== */
#formTable dl {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#formTable dt {
margin-bottom: 20px;
width: 20%;
}
#formTable dd {
width: 75%;
}
.formTable input[type="text"],
.formTable textarea,
#formTable p.button a,
#formTable input[type="button"],
#formTable input[type="submit"] {
font-size: clamp(18px, 3vw, 20px);
}




}/* end */
/* 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

PC以外向け表示設定

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
@media only screen and (max-width: 769px){

/* base
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
body {
line-height: 1.6;
font-size: clamp(14px, 3vw, 16px);
}
h1 {
font-size: clamp(24px, 3vw, 32px);
}
h2 {
font-size: clamp(22px, 3vw, 28px);
}
.spBr {
display: block;
}


/* banner
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
.banner ul {
padding-top: 20px;
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.banner ul li {
width: calc(100%/2);
}



/* header
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */


/* globalnavi
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */



/* firstView
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
#firstView {
background-position: inherit;
}
#firstView .contentsWrap .head {
margin-bottom: 10px;
max-width: 80%;
}
#firstView .contentsWrap ul {
max-width: 65%;
}
#firstView .contentsWrap ul li {
margin-bottom: 5px;
}
#firstView .lead {
word-break: keep-all;
}
#firstView .lead {
font-size: clamp(16px, 3vw, 24px);
}



/* section
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
article > section .head {
padding-top: 35px;
padding-bottom: 45px;
}


/* Guide
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
#Guide .ulBlock .listBlock {
margin-bottom: 20px;
}
#Guide .ulBlock .listBlock a {
display: flex;
flex-wrap: nowrap;
vertical-align: bottom;
}
#Guide .ulBlock .listBlock figure {
margin-right: 10px;
width: 32vw;
height: 32vw;
display: block;
}
#Guide .ulBlock .listBlock p {
font-size: clamp(12px, 3vw, 16px);
}


/* Guide guideBlock
〜〜〜〜〜〜〜〜〜〜〜 */
.guideBlock .head figure {
padding-right: 1%;
width: 30%;
height: 140px;
position: relative;
overflow: hidden;
}
.guideBlock .head figure img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top 50% right 35%;
}
#businessBlock .head figure img {
object-position: top 50% right 50%;
}

#greetingsBlock .head figure img {
width: 120%;
height: 120%;
object-position: top 50% right 50%;
}
.guideBlock  .head .txtBlock {
width: 68%;
}


/* Guide company
〜〜〜〜〜〜〜〜〜〜〜 */
#companyBlock .foot .wrap {
background-color: rgba(255,255,255,0.6);
text-shadow: 0 0 2px rgba(0,0,0,0.2);
}
#companyBlock .rinen dl {
margin-right: auto;
margin-left: auto;
width: 90%;
}

/* Guide business
〜〜〜〜〜〜〜〜〜〜〜 */
#businessBlock .twoColumn {
margin-right: auto;
margin-left: auto;
width: 90%;
display: block;
}
#businessBlock .twoColumn table {
margin-bottom: 20px;
width: 100%;
font-size: 10px;
}
#businessBlock .twoColumn:last-of-type table tr {
width: 100%;
display: flex;
flex-wrap: wrap;
}
#businessBlock .twoColumn:last-of-type table tr th {
background-color: #d2ecfa;
}
#businessBlock .twoColumn:last-of-type table th {
border-bottom: 1px solid #ffffff;
}
#businessBlock .twoColumn:last-of-type table th,
#businessBlock .twoColumn:last-of-type table td {
width: 100%;
display: inline-block;
}
#businessBlock .foot .wrap {
background-color: rgba(255,255,255,0.6);
text-shadow: 0 0 2px rgba(0,0,0,0.2);
}

/* point
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
.point ul {
margin-right: auto;
margin-left: auto;
width: 80%;
}
.point ul li {
margin-bottom: 25px;
}


/* Recruit
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
#Recruit h2 {
margin-bottom: 15px;
}
#Recruit h3 {
margin-bottom: 10px;
}
#Recruit .staff {
margin-bottom: 30px;
}

#Recruit .contentsWrap .wrap {
margin-right: auto;
margin-left: auto;
padding: 20px;
width: 90%;
background-color: rgba(255,255,255,0.6);
text-shadow: 0 0 2px rgba(0,0,0,0.2);
}


/* workStyle
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
#workStyle ul li {
width: 40vw;
}

/* workStyle worksBlock
〜〜〜〜〜〜〜〜〜〜〜 */
.worksBlock .head figure {
width: 30%;
height: 140px;
position: relative;
}
.worksBlock .head figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.worksBlock .head .txtBlock {
width: 68%;
text-align: left;
}
.worksBlock .contentsWrap .lead {
margin-bottom: 40px;
}

.worksBlock .contentsWrap table tr {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.worksBlock .contentsWrap table th,
.worksBlock .contentsWrap table td {
width: 100%;
display: inline-block;
}




/* Area
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
#Area ul li:nth-last-of-type(n+2) {
margin-bottom: 50px;
}
#Area ul li .name {
margin-bottom: 10px;
}
#Area ul li .map {
margin-top: 15px;
width: 80%;
}


/* Request
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
.formTable input {
padding: 1em;
}
.formTable textarea {
padding: 1em;
}
#formTable dt {
margin-bottom: 15px;
}



/* footer
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */


}/* end */