@charset "UTF-8";
/* CSS Document */
.wrap2 {
 width: 780px;
 margin: 0 auto;
 position: relative;
}
.wrap2 .coment{
 position: absolute;
 background:rgba(255,255,255,0.8);
 top: -50px;
 right: 0;
 text-align: right;
 padding: 5px 20px;
 font-size: 0.8em;
 font-weight: bold;
}
h2 {
 font-size: 2em;
 line-height: 1.6;
 letter-spacing: .14em;
 font-weight: bold;
 margin-bottom: 40px;
}
h3 {
 font-size: 1.2em;
 font-weight: bold;
 margin: 40px auto 20px;
 text-align: left;
}
.tal {
 text-align: left;
}
section p {
 text-align: left;
 margin-bottom: 2em;
}
@media (max-width: 1080px) {
 .wrap2 {
  width: 78vw;
 }
 h2 {
  font-size: 1.6em;
  margin-bottom: 4vw;
 }
 h3 {
  font-size: 1.2em;
  margin: 4vw auto 2vw;
 }
}
@media (max-width: 740px) {
 .wrap2 {
  width: 82vw;
 }
}


/*============================
共通
============================*/
#mv {
 width: 100%;
 height: 470px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 margin-bottom: 90px;
 position: relative;
}
#mv::before {
 content: "";
 width: 100%;
 height: 100%;
 background: url(../images/common/mv.png) center center repeat;
 background-size: auto;
 position: absolute;
 top: 0;
 left: 0;
}
#mv h1 {
 color: #fff;
 font-size: 3.2em;
 font-weight: 900;
 letter-spacing: .28em;
 text-shadow: 0px 0px 8.55px rgba(0, 0, 0, 1);
 z-index: 2;
}
#mv h1 span {
 font-size: .4em;
 letter-spacing: .12em;
 text-transform: uppercase;
 display: inline-block;
 padding: 0 20px;
 border-bottom: 1px solid #fff;
}
.sec-img {
 width: 100%;
 padding: 280px 0 100px;
}
.whitebox {
 background: #fff;
 box-sizing: border-box;
}
.whitebox p {
 text-align: left;
 letter-spacing: .2em;
}
.whitebox p:not(:last-child) {
 margin-bottom: 40px;
}
.ttl-ribbon {
 display: table;
 text-align: left;
 height: 40px;
 line-height: 38px;
 padding: 0 24px;
 background: #ffda00;
 color: #000;
 font-size: 1.2em;
 font-weight: bold;
 position: relative;
}
.ttl-ribbon::after {
 content: "";
 width: 0;
 height: 0;
 border-left: 38px solid #ffda00;
 border-top: 40px solid transparent;
 position: absolute;
 bottom: 0;
 left: 100%;
}
.ttl-ribbon span {
 color: #fff;
 font-size: 1.16em;
 margin-right: 15px;
}
@media (max-width: 1080px) {
 #mv {
  height: 47vw;
  margin-bottom: 9vw;
 }
 #mv h1 {
  font-size: 2em;
 }
 #mv h1 span {
  font-size: .66em;
  padding: 0 2vw;
 }
 .sec-img {
  padding: 20vw 0 10vw;
 }
 .whitebox p:not(:last-child) {
  margin-bottom: 4vw;
 }
 .ttl-ribbon {
  height: 4vw;
  line-height: 4vw;
  padding: 0 2.4vw;
 }
 .ttl-ribbon::after {
  border-left: 3.8vw solid #ffda00;
  border-top: 4vw solid transparent;
 }
 .ttl-ribbon span {
  margin-right: 1.5vw;
 }
}
@media (max-width: 740px) {
 #mv {
  margin-top: 65px;
 }
}


/*============================
about
============================*/
#about {
 background: #eeeeee;
}
#about #mv {
 background: url(../images/about/mv.jpg) center center no-repeat;
 background-size: cover;
}
#about-sec1 {
 background: url(../images/about/img1.jpg) center top no-repeat;
 background-size: 100%;
}
#about-sec2 {
 background: url(../images/about/img2.jpg) center top no-repeat;
 background-size: 100%;
}
#about-sec3 {
 background: url(../images/about/img3.jpg) center top no-repeat;
 background-size: 100%;
}
#about .whitebox {
 padding: 60px 100px 50px;
}
.ylw-hr {
 border: none;
 border-top: 1px solid #ffda00;
}
.about-table {
 width: 100%;
 text-align: left;
}
.about-table td {
 width: 280px;
}
@media (max-width: 1080px) {
 #about .whitebox {
  padding: 6vw 10vw 5vw;
 }
 .about-table td {
  min-width: 50%;
  width: auto;
 }
}


/*============================
company
============================*/
#company #mv {
 background: url(../images/company/mv.jpg) center center no-repeat;
 background-size: cover;
}
#company-sec2 {
 padding: 110px 0 170px;
}
.company-table, .requirement-table {
 width: 100%;
 max-width: 780px;
}
.company-table, .works-table, .requirement-table {
 margin: 0 auto;
 text-align: left;
 font-size: 1em;
 border-bottom: 1px dotted #a3a3a3;
}
.company-table th, .company-table td, .works-table th, .works-table td, .requirement-table th, .requirement-table td {
 border-top: 1px dotted #a3a3a3;
 padding: 20px;
}
.company-table td.noborder {
 border: none;
 padding-top: 0;
}
.company-table th, .works-table th, .requirement-table th {
 font-weight: bold;
}
.company-table th span {
 font-size: 1.6em;
}
.company-table td:nth-of-type(1) {
 white-space: nowrap;
}
#company-sec3 {
 padding: 150px 0 100px;
 position: relative;
}
#company-sec3::before {
 content: "";
 width: 200vw;
 height: 100%;
 background: #fffadd;
 position: absolute;
 top: 0;
 left: 0;
 transform: rotate(-5deg) translateX(-40%);
 z-index: -1;
}
@media (max-width: 1080px) {
 #company-sec2 {
  padding: 11vw 0 17vw;
 }
 .company-table {
  width: 78vw;
 }
 .company-table th, .company-table td, {
  padding: 2vw;
 }
 #company-sec3 {
  padding: 15vw 0 10vw;
 }
}
@media (max-width: 768px) {
 .company-table {
  width: 100%;
 }
 .company-table th {
  white-space: nowrap;
  padding: 2vw;
 }
 .company-table th span {
  font-size: 1.2em;
 }
}


/*============================
works
============================*/
#works #mv {
 background: url(../images/works/mv.jpg) center center no-repeat;
 background-size: cover;
}
.works-table {
 width: 100%;
 margin-bottom: 100px;
}
.works-table th {
 text-align: center;
}
.works-table td:nth-of-type(2), .works-table td:nth-of-type(3), .works-table td:nth-of-type(4) {
 text-align: center;
}
.red {
 color: #ffb400;
}
@media (max-width: 1080px) {
 .works-table {
  margin-bottom: 10vw;
 }
 .works-table th {
  white-space: nowrap;
 }
 .works-table th, .works-table td {
  padding: 1vw;
  min-width: calc(3em + 4vw);
 }
}
@media (max-width: 740px) {
 .works-table {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
 }
}


/*============================
service
============================*/
#service #mv {
 background: url(../images/service/mv.jpg) center center no-repeat;
 background-size: cover;
}
ul.service-nav {
 display: flex;
 align-items: center;
 justify-content: center;
 box-sizing: border-box;
 padding: 20px;
 background: #ffda00;
}
ul.service-nav li a {
 color: #000;
 text-decoration: none;
 font-size: 1.2em;
 font-weight: bold;
 padding: 0 30px;
 position: relative;
}
ul.service-nav li a::before {
 content: "";
 width: 15px;
 height: 4px;
 background: #fff;
 position: absolute;
 right: 0;
 top: 5px;
}
ul.service-nav li a::after {
 content: "";
 width: 0;
 height: 0;
 border-top: 7px solid #fff;
 border-left: 7.5px solid transparent;
 border-right: 7.5px solid transparent;
 position: absolute;
 right: 0;
 bottom: 6px;
}
#service .ttl-ribbon {
 margin: 100px auto 30px 0;
}
.service-box h2 {
 text-align: left;
 font-size: 2.4em;
 font-weight: 900;
 padding-bottom: 15px;
 border-bottom: #a3a3a3 dotted 1px;
}
table.service-table {
 width: 51.5%;
 margin-bottom: 65px;
}
table.service-table + figure {
 margin-bottom: 65px;
 margin-left: 30px;
 flex: 1;
}
table.service-table th, table.service-table td {
 text-align: left;
 border-bottom: #a3a3a3 dotted 1px;
 padding: 15px 0;
}
table.service-table th {
 width: 20%;
 font-weight: bold;
}
.service-detail {
 flex: 1;
}
.service-detail + .service-detail {
 margin-left: 30px;
}
.service-detail figure img {
 width: 100%;
 position: relative;
}
.service-detail h3 {
 text-align: center;
 font-size: 1.6em;
 line-height: 1.5;
 font-weight: 900;
 margin: 20px auto;
}
.service-detail h3.col3 {
 max-width: 280px;
 height: 72px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.service-detail p {
 font-size: 1.06em;
 line-height: 2.25;
 letter-spacing: .2em;
}
.steps-box {
 counter-reset: number 0;
}
.steps-box figure {
 position: relative;
}
.steps-box figure::before {
 counter-increment: number 1;
 content: "0"counter(number);
 font-size: 3em;
 font-weight: 900;
 width: 66px;
 height: 66px;
 background: url(../images/common/octangle2.svg) center center no-repeat;
 background-size: contain;
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 left: 20px;
 top: -33px;
 z-index: 2;
}
@media (max-width: 1080px) {
 ul.service-nav {
  padding: 2vw;
 }
 ul.service-nav li a {
  padding: 0 3vw;
 }
 ul.service-nav li a::before {
  width: 1.5vw;
  height: 0.4vw;
  top: 0.5vw;
 }
 ul.service-nav li a::after {
  border-top: .7vw solid #fff;
  border-left: .75vw solid transparent;
  border-right: .75vw solid transparent;
  bottom: 0.6vw;
 }
 #service .ttl-ribbon {
  margin: 10vw auto 3vw 0;
 }
 .service-box h2 {
  padding-bottom: 1.5vw;
 }
 table.service-table {
  margin-bottom: 6.5vw;
 }
 table.service-table + figure {
  margin-bottom: 6.5vw;
  margin-left: 3vw;
 }
 table.service-table th, table.service-table td {
  padding: 1.5vw 0;
 }
 .service-detail + .service-detail {
  margin-left: 3vw;
 }
 .service-detail h3 {
  margin: 2vw auto;
 }
 .service-detail h3.col3 {
  max-width: 28vw;
  height: 7.2vw;
 }
 .steps-box figure::before {
  width: 6.6vw;
  height: 6.6vw;
  left: 2vw;
  top: -3.3vw;
 }
}
@media (max-width: 740px) {
 #service section {
  margin-top: -60px;
  padding-top: 60px;
 }
 .service-box h2 {
  font-size: 1.6em;
 }
 .service-detail h3 {
  font-size: 1.2em;
 }
 ul.service-nav li a::before {
  width: 2vw;
  height: 1vw;
  top: 1vw;
 }
 ul.service-nav li a::after {
  border-width: 1.5vw 1vw 0 1vw;
  bottom: 1vw;
 }
 .ttl-ribbon {
  height: 8vw;
  line-height: 8vw;
 }
 .ttl-ribbon::after {
  border-width: 8vw 0 0 5vw;
 }
 table.service-table {
  width: 100%;
  margin-bottom: 10vw;
 }
 .service-detail {
  margin-bottom: 8vw;
 }
 table.service-table + figure, .service-detail + .service-detail {
  margin-left: 0;
 }
 table.service-table + figure {
  margin-bottom: 3vw;
 }
 .service-detail h3.col3 {
  max-width: 100%;
  height: auto;
 }
 .steps-box figure::before {
  width: 12vw;
  height: 12vw;
  top: -6vw;
  left: 4vw;
  font-size: 2em;
 }
}


/*============================
technique
============================*/
#technique {
 background: #eeeeee;
}
#technique section:not(#tech-step) {
 padding-bottom: 100px;
}
#technique #mv {
 background: url(../images/technique/mv.jpg) center center no-repeat;
 background-size: cover;
}
#technique h2 {
 text-align: left;
 font-size: 3.2em;
 line-height: 1.25;
 margin-top: 20px;
}
.tech1-img {
 margin-left: 40px;
}
.flex {
 flex: 1;
}
.description {
 font-size: 1.73em;
 line-height: 1.9;
 font-weight: 700;
 margin-bottom: 30px;
}
.tech-top-slider img {
 width: 100%;
 height: 500px;
 object-fit: cover;
 margin-bottom: 50px;
}
.tech-top-slider {
 position: relative;
}
.tech-top-slider::before {
 content: "";
 width: 66px;
 height: 66px;
 position: absolute;
 top: 30px;
 left: calc(50% - 540px);
 z-index: 5;
}
.tech-slider1:before {
 background: url(../images/technique/point1.svg) center center no-repeat;
 background-size: contain;
}
.tech-slider2:before {
 background: url(../images/technique/point2.svg) center center no-repeat;
 background-size: contain;
}
.tech-slider3:before {
 background: url(../images/technique/point3.svg) center center no-repeat;
 background-size: contain;
}
.tech-slider4:before {
 background: url(../images/technique/point4.svg) center center no-repeat;
 background-size: contain;
}
.tech-slider5:before {
 background: url(../images/technique/point5.svg) center center no-repeat;
 background-size: contain;
}
.tech-slider6:before {
 background: url(../images/technique/point6.svg) center center no-repeat;
 background-size: contain;
}
.tech-slider7:before {
 background: url(../images/technique/point7.svg) center center no-repeat;
 background-size: contain;
}
#technique .whitebox {
 width: 47.2%;
 padding: 10px 30px 50px;
 margin-top: 50px;
}
#technique .whitebox h3 {
 text-align: center;
 font-size: 1.6em;
}
table.tech-each-table {
 text-align: left;
}
table.tech-each-table th {
 width: 65px;
}
#technique .whitebox figure{
 margin-bottom: 30px;
}


.tech-each-slider .slick-dots {
 bottom: 10px;
}
.tech-each-slider .slick-dots li button::before {
 color: #fff;
 opacity: 1;
 font-size: .8em;
}
.tech-each-slider .slick-dots li.slick-active button::before {
 color: #ffda00;
}
#tech-step {
 padding-top: 150px;
 position: relative;
 overflow: hidden;
}
#tech-step::before {
 content: "";
 width: 300vw;
 height: 100%;
 background: #fff;
 transform: rotate(-5deg) translateX(-50%);
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
}
.tech-step-each {
 width: 47.2%;
 margin-bottom: 80px;
}
.tech-step-each h3, .consider-each h3 {
 font-size: 1.6em;
 text-align: center;
 margin: 20px auto;
}
#consider {
 background: #f4f4f4;
 padding: 50px 0;
}
.octangle-box {
 width: 100%;
 margin: 0 auto;
 background: #fff9d7;
 border: 5px solid #ffda00;
 box-sizing: border-box;
 padding: 65px 55px 55px;
 position: relative;
}
.corner::before, .corner::after {
 content: "";
 width: 0;
 height: 0;
 position: absolute;
}
.corner1::before {
 border-top: #ffda00 36px solid;
 border-right: transparent 36px solid;
 top: -5px;
 left: -5px;
}
.corner1::after {
 border-top: #f4f4f4 30px solid;
 border-right: transparent 30px solid;
 top: -5px;
 left: -5px;
}
.corner2::before {
 border-left: #ffda00 36px solid;
 border-top: transparent 36px solid;
 bottom: -5px;
 left: -5px;
}
.corner2::after {
 border-left: #f4f4f4 30px solid;
 border-top: transparent 30px solid;
 bottom: -5px;
 left: -5px;
}
.corner3::before {
 border-top: #ffda00 36px solid;
 border-left: transparent 36px solid;
 top: -5px;
 right: -5px;
}
.corner3::after {
 border-top: #f4f4f4 30px solid;
 border-left: transparent 30px solid;
 top: -5px;
 right: -5px;
}
.corner4::before {
 border-right: #ffda00 36px solid;
 border-top: transparent 36px solid;
 bottom: -5px;
 right: -5px;
}
.corner4::after {
 border-right: #f4f4f4 30px solid;
 border-top: transparent 30px solid;
 bottom: -5px;
 right: -5px;
}
.tag {
 position: absolute;
 top: -15px;
 left: 0;
 right: 0;
 margin: auto;
 width: fit-content;
 background: #ffda00;
 padding: 5px 35px;
 display: table;
 font-size: 1.2em;
 font-weight: bold;
}
.consider-each p {
 width: 300px;
 margin: 0;
}
@media (max-width: 1080px) {
 #technique section:not(#tech-step) {
  padding-bottom: 10vw;
 }
 #technique h2 {
  margin-top: 2vw;
 }
 .tech1-img {
  margin-left: 4vw;
  width: 42vw;
 }
 .description {
  margin-bottom: 3vw;
 }
 .tech-top-slider img {
  height: 50vw;
  margin-bottom: 5vw;
 }
 #technique .whitebox {
  padding: 1vw 3vw 5vw;
  margin-top: 5vw;
 }
 table.tech-each-table th {
  width: 6.5vw;
 }
 .tech-each-slider .slick-dots {
  bottom: 1vw;
 }
 #tech-step {
  padding-top: 15vw;
 }
 .tech-step-each {
  margin-bottom: 8vw;
 }
 .tech-step-each h3, .consider-each h3 {
  margin: 2vw auto;
 }
 #consider {
  padding: 5vw 0;
 }
 .consider-each {
  width: 32%;
 }
 .octangle-box {
  border: .5vw solid #ffda00;
  padding: 6.5vw 5.5vw 5.5vw;
 }
 .corner1::before {
  border-top: #ffda00 3.6vw solid;
  border-right: transparent 3.6vw solid;
  top: -0.5vw;
  left: -0.5vw;
 }
 .corner1::after {
  border-top: #f4f4f4 3vw solid;
  border-right: transparent 3vw solid;
  top: -0.5vw;
  left: -0.5vw;
 }
 .corner2::before {
  border-left: #ffda00 3.6vw solid;
  border-top: transparent 3.6vw solid;
  bottom: -0.5vw;
  left: -0.5vw;
 }
 .corner2::after {
  border-left: #f4f4f4 3vw solid;
  border-top: transparent 3vw solid;
  bottom: -0.5vw;
  left: -0.5vw;
 }
 .corner3::before {
  border-top: #ffda00 3.6vw solid;
  border-left: transparent 3.6vw solid;
  top: -0.5vw;
  right: -0.5vw;
 }
 .corner3::after {
  border-top: #f4f4f4 3vw solid;
  border-left: transparent 3vw solid;
  top: -0.5vw;
  right: -0.5vw;
 }
 .corner4::before {
  border-right: #ffda00 3.6vw solid;
  border-top: transparent 3.6vw solid;
  bottom: -0.5vw;
  right: -0.5vw;
 }
 .corner4::after {
  border-right: #f4f4f4 3vw solid;
  border-top: transparent 3vw solid;
  bottom: -0.5vw;
  right: -0.5vw;
 }
 .tag {
  top: -1.5vw;
  padding: 0.5vw 3.5vw;
 }
 .consider-each p {
  width: 100%;
 }
}
@media (max-width: 740px) {
 #technique h2 {
  font-size: 2em;
 }
 #technique .whitebox h3, .tech-step-each h3, .consider-each h3 {
  font-size: 1.2em;
 }
 .description {
  font-size: 1.4em;
 }
 .tech1-img {
  width: 60vw;
  margin: 0 auto 5vw;
 }
 #technique .whitebox, .tech-step-each {
  width: 100%;
 }
 #technique .whitebox {
  padding: 1vw 5vw 5vw;
 }
 table.tech-each-table th {
  width: 12vw;
 }
 .octangle-box {
  padding: 10vw 5vw 5vw;
 }
 .tag {
  top: -4vw;
 }
 .consider-each {
  width: 100%;
  margin-bottom: 5vw;
 }
}


/*============================
recruit
============================*/
#recruit_mv {
 width: 100%;
 height: 1220px;
 background: url(../images/recruit/mv.jpg) center center no-repeat;
 background-size: cover;
 box-sizing: border-box;
 padding-top: 82px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}
h1.with-en {
 font-size: 3.2em;
 font-weight: 900;
 line-height: 2.08;
 letter-spacing: .28em;
 color: #fff;
 margin-bottom: 80px;
}
h1.with-en span {
 font-size: .44em;
 letter-spacing: .12em;
 text-transform: uppercase;
 display: inline-block;
 border-bottom: 1px solid #fff;
 margin: 0 auto;
}
#recruit-data {
 max-width: 1280px;
 margin: -120px auto 0;
 background: url(../images/recruit/bg0.png) center bottom 150px no-repeat;
 background-size: 100%;
}
.recruit-data-img {
 margin-bottom: 70px;
}
#recruit-data .wrap div{
 padding: 20px;
}
#recruit-data .wrap div img{
 margin-bottom: 20px;
}
#recruit-data .wrap div img:nth-last-child(){
 margin-bottom: 40px;
}
.center {
 text-align: center !important;
 font-size: 1.2em;
 line-height: 2.66;
 margin: 0 auto 50px;
}
#give {
 margin-top: -80px;
}
#give .wrap {
 height: 630px;
 background: url(../images/recruit/bg1.jpg) center center no-repeat;
 background-size: cover;
 display: flex;
 align-items: center;
 justify-content: center;
}
.transparent-box {
 width: 880px;
 height: auto;
 background: rgba(255, 255, 255, .7);
 box-sizing: border-box;
 padding: 60px 60px 40px 60px;
}
#recruit-interview .wrap {
 padding: 80px 0 40px;
 background: url(../images/recruit/bg2.png) top right no-repeat;
 background-size: 100%;
}
#recruit-interview h2 {
 text-align: left;
 line-height: 1.4;
 margin-bottom: 60px;
}
#recruit-interview h2 span {
 border-bottom: 1px solid #ffda00;
 display: inline-block;
 margin-left: 0;
}
#recruit-interview a {
 width: 48%;
 position: relative;
 z-index: 1;
}
#btn-area {
 width: 100%;
 height: 470px;
 background: url(../images/recruit/footer-bg.jpg) center top no-repeat;
 background-size: cover;
 box-sizing: border-box;
 padding-top: 150px;
}
@media (max-width: 1080px) {
 #recruit_mv {
  height: 122vw;
  padding-top: 8.2vw;
 }
 h1.with-en {
  margin-bottom: 8vw;
 }
 .mv-entry-btn {
  width: 21.6vw;
  height: 21.6vw;
 }
 .mv-entry-btn span {
  top: 5vw;
 }
 .mv-entry-btn::before, .mv-entry-btn::after {
  bottom: 3.4vw;
 }
 .mv-entry-btn::before {
  width: 0.4vw;
  height: 1.8vw;
  left: 10.2vw;
 }
 .mv-entry-btn::after {
  right: 10.3vw;
 }
 #recruit-data {
  margin-top: -12vw;
  background: url(../images/recruit/bg0.png) center bottom 16vw no-repeat;
  background-size: 100%;
  background-size: contain;
 }
 .recruit-data-img {
  margin-bottom: 7vw;
 }
 .center {
  margin: 0 auto 5vw;
 }
 #give {
  margin-top: -8vw;
 }
 #give .wrap {
  height: 63vw;
 }
 .transparent-box {
  width: 88vw;
  padding: 6vw 6vw 4vw 6vw;
 }
 #recruit-interview .wrap {
  padding: 8vw 0;
 }
 #recruit-interview h2 {
  margin-bottom: 6vw;
 }
 #btn-area {
  height: 47vw;
  padding-top: 15vw;
 }
}
@media (max-width: 740px) {
 #recruit_mv {
  height: 100vw;
 }
 .mv-entry-btn {
  font-size: 1em;
  width: 24vw;
  height: 24vw;
 }
 .mv-entry-btn::before {
  height: 3.3vw;
  left: 11.8vw;
 }
 #recruit-data {
  margin-top: 5vw;
 }
 #give {
  margin-top: -3vw;
 }
 #give .wrap {
  height: auto;
  padding-bottom: 5vw;
 }
 .transparent-box {
  margin-top: 10vw;
 }
 #btn-area {
  height: auto;
  padding-bottom: 5vw;
 }
}


/*============================
recruit-about
============================*/
#mv.recruit-mv {
 background: url(../images/recruit/bottom/mv.png) center center no-repeat;
 background-size: cover;
}
#mv.recruit-mv::before {
 content: none;
}
#mv.recruit-mv h1 {
 text-shadow: none;
 color: #000;
}
#mv.recruit-mv h1 span {
 color: #fff;
}
#message {
 margin-top: -125px;
}
h2.message-ttl {
 display: table;
 text-align: left;
 background: #fff;
 padding: 15px 20px;
 margin-bottom: 60px;
}
h2.message-ttl::before {
 left: 20px;
 bottom: -20px;
 right: unset;
}
h2.message-ttl span {
 margin-bottom: 0;
}
.imgright {
 float: right;
 margin: 0 0 50px 80px;
}
#recruit-about h3 {
 margin-bottom: 30px;
}
span.ylw-bg {
 background: #ffda00;
 font-size: 2em;
 line-height: 1.66;
 display: inline;
}
#message p {
 font-size: 1.2em;
 letter-spacing: .22em;
}
#message p + h3 {
 margin-top: 80px;
}
#message p.signature {
 text-align: right;
 font-size: 2.4em;
 line-height: 1.2;
 font-weight: bold;
}
#message p.signature span {
 font-size: .5em;
 letter-spacing: .06em;
 font-weight: normal;
}
#history {
 padding-bottom: 200px;
}
.bg-narrow {
 position: relative;
 overflow: hidden;
 padding-top: 130px;
}
.bg-narrow::before {
 content: "";
 width: 300vw;
 height: 100%;
 background: #fffadd;
 transform: rotate(-5deg) translateX(-50%);
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
}
#chronology {
 width: 880px;
 height: 940px;
 margin: 0 auto;
 position: relative;
}
#chronology::before {
 content: "";
 width: 10px;
 height: 670px;
 background: #ffda00;
 position: absolute;
 top: 37px;
 left: 0;
 right: 0;
 margin: auto;
}
.chrono-each {
 position: absolute;
 width: 396px;
}
.chrono1 {
 top: 0;
 left: 0;
}
.chrono2 {
 top: 120px;
 right: 0;
}
.chrono3 {
 bottom: 0px;
 right: 0;
}
.chrono4 {
 bottom: 0;
 left: 0;
}
.chrono-each img {
 width: 240px;
 margin-bottom: 10px;
}
.chrono1 img, .chrono4 img {
 margin-right: 0;
}
.chrono2 img, .chrono3 img {
 margin-left: 0;
}
.chrono2 img {
 width: 280px;
}
.chrono5 {
 width: 389px;
 height: 245px;
 top: 370px;
 left: 0;
 background: #fff;
 border: 5px solid #ffda00;
 padding: 40px;
}
.chrono5 .corner1::after {
 border-top-color: #fffadd;
}
.chrono5 .corner2::after {
 border-left-color: #fffadd;
}
.chrono5 .corner3::after {
 border-top-color: #fffadd;
}
.chrono5 .corner4::after {
 border-right-color: #fffadd;
}
.chrono-each figure {
 position: relative;
}
.chrono-each figure::before {
 content: "";
 width: 34px;
 height: 34px;
 background: #fff;
 border: 5px solid #fde35a;
 border-radius: 17px;
 display: block;
 box-sizing: border-box;
 position: absolute;
 top: 10px;
}
.chrono1 figure, .chrono4 figure {
 text-align: right;
}
.chrono1 figure::before, .chrono4 figure::before {
 right: -60px;
}
.chrono2 figure::before, .chrono3 figure::before {
 left: -60px;
}
#chronology h3 {
 margin: 0 auto 20px;
}
#chronology h3 span {
 font-size: 1.33em;
 letter-spacing: 0;
}
#chronology p {
 letter-spacing: .04em;
 font-size: 1.2em;
}
.chrono1 h3, .chrono4 h3 {
 text-align: right;
}
#chronology .tag {
 letter-spacing: 0;
 padding: 5px 10px;
}
#chronology .chrono5 p.description {
 font-size: 1.6em;
 line-height: 1.5;
 margin-bottom: 5px;
}
#chronology .chrono5 p {
 font-size: 1.06em;
 letter-spacing: .04em;
 line-height: 1.7;
}
#entry-area {
 width: 100%;
 height: 320px;
 background: url(../images/recruit/bottom/footer-bg.png)center top no-repeat;
 background-size: cover;
 box-sizing: border-box;
 padding-top: 80px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-top: -120px;
 z-index: 10;
 position: relative;
}
.btn.center {
 margin-bottom: 0;
}


@media (max-width: 1080px) {
 #message {
  margin-top: -12.5vw;
 }
 #recruit_mv h1.with-en {
  font-size: 2em;
 }
 h2.message-ttl {
  padding: 1.5vw 2vw;
  margin-bottom: 6vw;
 }
 h2.message-ttl::before {
  left: 2vw;
  bottom: -2vw;
 }
 .imgright {
  width: 40vw;
  margin: 0 0 5vw 8vw;
 }
 #recruit-about h3 {
  margin-bottom: 3vw;
 }
 #message p + h3 {
  margin-top: 6vw;
 }
 #history {
  padding: 13vw 0 20vw;
 }
 .bg-narrow {
  padding-top: 13vw;
 }
 #chronology {
  width: 88vw;
  height: 94vw;
 }
 #chronology::before {
  width: 1vw;
  height: 67vw;
  top: 3.7vw;
 }
 #chronology figure::before {
  width: 3.4vw;
  height: 3.4vw;
  border-radius: 1.7vw;
  border: .5vw #fde35a solid;
  top: 1vw;
 }
 .chrono-each {
  width: 39.6vw;
 }
 .chrono-each img {
  margin-bottom: 1vw;
 }
 .chrono2 {
  top: 12vw;
 }
 .chrono5 {
  width: 38.9vw;
  height: 24.5vw;
  top: 37vw;
  border: .5vw solid #ffda00;
  padding: 4vw;
 }
 .chrono1 figure::before, .chrono4 figure::before {
  right: -6vw;
 }
 .chrono2 figure::before, .chrono3 figure::before {
  left: -6vw;
 }
 #chronology h3 {
  margin: 0 auto 2vw;
 }
 #chronology .tag {
  padding: 0.5vw 1vw;
 }
 #chronology .chrono5 p.description {
  margin-bottom: 0.5vw;
 }
 #entry-area {
  height: 32vw;
  padding-top: 8vw;
  margin-top: -12vw;
 }
}

@media (max-width: 740px) {
 .imgright {
  float: none;
  margin: 0 auto 5vw;
  width: 100%;
 }
 span.ylw-bg {
  font-size: 1.3em;
 }
 #chronology {
  width: 100%;
  height: 170vw;
 }
 #chronology::before {
  height: 130vw;
 }
 #chronology h3, #chronology .chrono5 p.description {
  font-size: 1em;
 }
 #chronology h3 span {
  font-size: 1em;
 }
 #chronology p, #chronology .chrono5 p {
  font-size: .9em;
 }
 .chrono-each {
  width: 43vw;
 }
 .chrono-each img {
  height: 8vw;
 }
 .chrono5 {
  height: auto;
  padding: 7vw 3vw 0 3vw;
  top: 72vw;
 }
 #chronology .tag {
  top: -6vw;
  line-height: 1.5;
  font-size: 1em;
 }
}


/*============================
recruit-business
============================*/
#recruit-business p:not([class]) {
 font-size: 1.33em;
 letter-spacing: .2em;
}
#business-copy h2 {
 font-size: 3.2em;
 line-height: 1.66;
}
#business-copy p {
 margin-bottom: 0;
}
#recruit-business .bg-narrow h2.with-en span {
 position: relative;
 display: inline-block;
}
#recruit-business .bg-narrow h2.with-en span::before {
 content: "";
 width: 80px;
 height: 80px;
 background: url(../images/common/octangle.svg) center center no-repeat;
 background-size: contain;
 position: absolute;
 top: 10px;
 left: -90px;
 z-index: -1;
}
#business-content {
 padding-bottom: 100px;
 margin-bottom: 100px;
}
.business-each.col2 {
 width: 47.2%;
 margin-bottom: 60px;
}
.business-each.col3 {
 width: 31.48%;
}
.content-ttl {
 width: 100%;
 padding: 20px;
 background: #ffda00;
 margin-top: 30px;
 font-size: 1.6em;
 font-weight: bold;
 line-height: 1.5;
}
.ylw-box {
 background: #ffda00;
 padding: 35px 40px 5px 40px;
}
.measure-each {
 background: #fff;
 padding: 20px 40px;
 margin-bottom: 30px;
 position: relative;
}
.measure-each .corner {
 display: contents;
}
.measure-each .corner1::after {
 border-top-color: #ffda00;
}
.measure-each .corner2::after {
 border-left-color: #ffda00;
}
.measure-each .corner3::after {
 border-top-color: #ffda00;
}
.measure-each .corner4::after {
 border-right-color: #ffda00;
}
.measure-each h3, .example-box h3 {
 display: flex;
 align-items: center;
 text-align: left;
 font-size: 2.66em;
 font-weight: bold;
 margin-top: 0;
}
.measure-each h3 img, .example-box h3 img {
 margin-left: 0;
 margin-right: 20px;
}
.measure-each ul {
 text-align: left;
}
.measure-each ul li {
 padding-left: 18px;
 font-weight: bold;
 position: relative;
 font-size: 1.33em;
 letter-spacing: .2em;
}
.measure-each ul li::before {
 content: "●";
}
.measure-each:nth-of-type(2) {
 padding-right: 130px;
}
.example-box {
 width: 1000px;
 margin: 50px auto 0;
 padding: 30px 60px 68px 60px;
 background: #ffda00;
 position: relative;
 box-sizing: border-box;
}
.example-box .corner::before {
 content: none;
}
.example-box .corner1::after {
 border-top-color: #fff;
 top: 0;
 left: 0;
}
.example-box .corner2::after {
 border-left-color: #fff;
 bottom: 0;
 left: 0;
}
.example-box .corner3::after {
 border-top-color: #fff;
 top: 0;
 right: 0;
}
.example-box .corner4::after {
 border-right-color: #fff;
 bottom: 0;
 right: 0;
}
.example-box .whitebox {
 padding: 20px;
}
.example-box .whitebox p {
 font-weight: bold;
 margin: 0;
 font-size: 2em;
}
.example-box .whitebox p span {
 border-bottom: 3px solid #ff6600;
}
.whitebox h4 {
 font-size: 2.13em;
 font-weight: bold;
 margin-bottom: 40px;
}
#recruit-message {
 padding-bottom: 200px;
}
#recruit-message .whitebox {
 width: 47.2%;
 padding: 50px 35px 10px;
}
.recruit-box {
 position: relative;
 background: #fff;
 padding: 60px 40px 15px;
 border: 5px solid #ffda00;
 margin-top: 100px;
}
.recruit-box h4 {
 font-size: 2.13em;
 text-align: left;
 font-weight: bold;
}
.recruit-box .corner1::after {
 border-top-color: #fffadd;
}
.recruit-box .corner2::after {
 border-left-color: #fffadd;
}
.recruit-box .corner3::after {
 border-top-color: #fffadd;
}
.recruit-box .corner4::after {
 border-right-color: #fffadd;
}
@media (max-width: 1080px) {
 #recruit-business .bg-narrow h2.with-en span::before {
  width: 8vw;
  height: 8vw;
  top: 1vw;
  left: -9vw;
 }
 #business-content {
  padding-bottom: 10vw;
  margin-bottom: 10vw;
 }
 .business-each.col2, .business-each.col3 {
  margin-bottom: 6vw;
 }
 .content-ttl {
  padding: 2vw;
  margin-top: 3vw;
 }
 .ylw-box {
  padding: 3.5vw 4vw 0.5vw 4vw;
 }
 .measure-each {
  padding: 2vw 4vw;
  margin-bottom: 3vw;
 }
 .measure-each h3 img, .example-box h3 img {
  margin-right: 2vw;
 }
 .measure-each ul li {
  padding-left: 1.8vw;
 }
 .measure-each:nth-of-type(2) {
  padding-right: 13vw;
 }
 .measure-each figure img {
  max-width: 40vw;
  max-height: 20vw;
 }
 .example-box {
  width: 100%;
  margin: 5vw auto 0;
  padding: 3vw 6vw 6.8vw 6vw;
 }
 .example-box .whitebox {
  padding: 2vw;
 }
 .whitebox h4 {
  margin-bottom: 4vw;
 }
 #recruit-message {
  padding-bottom: 20vw;
 }
 #recruit-message .whitebox {
  padding: 5vw 3.5vw 1vw;
 }
 .recruit-box {
  padding: 6vw 4vw 1.5vw;
  border: .5vw solid #ffda00;
  margin-top: 10vw;
 }
}
@media (max-width: 740px) {
 #business-copy h2 {
  font-size: 1.6em;
 }
 #recruit-business p:not([class]) {
  font-size: 1em;
 }
 .business-each.col2, .business-each.col3 {
  width: 100%;
 }
 #recruit-message .whitebox {
  width: 100%;
  margin: 0 0 5vw 0;
 }
 .measure-each-txt {
  width: fit-content;
  margin: 0 auto 5vw;
 }
 .content-ttl {
  font-size: 1.2em;
 }
 .measure-each h3, .example-box h3 {
  font-size: 1.6em;
 }
 .measure-each ul li {
  font-size: 1em;
 }
 .example-box .whitebox p {
  font-size: 1.2em;
 }
 .recruit-box h4 {
  font-size: 1.3em;
 }
}


/*============================
recruit-training
============================*/
#recruit-training h1 {
 line-height: 1.25;
}
#recruit-training h1 span {
 margin-bottom: 20px;
}
ul.benefit-list li {
 text-align: left;
 padding: 10px 0;
}
ul.benefit-list li span {
 background: #fffadd;
 padding: 20px;
 display: block;
}
.benefit-box {
 background: #fff1dd;
 padding: 40px;
 margin-top: 50px;
}
.benefit-box h3 {
 font-size: 1.06em;
 font-weight: bold;
 margin-top: 0;
}
.benefit-box p {
 margin: 0;
}
#training {
 padding: 150px 0 200px;
}
.training-each {
 width: 48.33%;
 height: 90px;
 background: #fff;
 border: 5px solid #ffda00;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 20px;
 position: relative;
 font-size: 1.2em;
 font-weight: bold;
}
.training-each .corner1::after {
 border-top-color: #fffadd;
}
.training-each .corner2::after {
 border-left-color: #fffadd;
}
.training-each .corner3::after {
 border-top-color: #fffadd;
}
.training-each .corner4::after {
 border-right-color: #fffadd;
}
#training p {
 font-size: 1.6em;
 font-weight: bold;
 width: 48.3%;
 line-height: 90px;
 margin: 0;
}
@media (max-width: 1080px) {
 #recruit-training h1 span {
  margin-bottom: 2vw;
 }
 ul.benefit-list li {
  padding: 1vw 0;
 }
 ul.benefit-list li span {
  padding: 2vw;
 }
 #benefit figure {
  width: 36vw;
 }
 .benefit-box {
  padding: 4vw;
  margin-top: 5vw;
 }
 #training {
  padding: 15vw 0 20vw;
 }
 .training-each {
  height: 9vw;
  border: .5vw solid #ffda00;
  margin-bottom: 2vw;
 }
 #training p {
  line-height: 9vw;
  margin: 0;
  font-size: 1em;
 }
}
@media (max-width: 740px) {
 #benefit figure {
  width: 80vw;
  margin: 5vw auto;
 }
 .training-each {
  width: 100%;
  height: 12vw;
 }
 #training p {
  text-align: right;
  width: 100%;
 }
}
#interview-all {
 padding-bottom: 100px;
}
#interview-all a {
 width: 48%;
}
@media (max-width: 1080px) {
 #interview-all {
  padding-bottom: 10vw;
 }
}
@media (max-width: 768px) {
 #interview-all a {
  width: 100%;
 }
}


/*============================
people
============================*/
.people-mv {
 height: 825px;
 position: relative;
 display: flex;
 align-items: center;
}
.people-mv.people1 {
 background: url(../images/recruit/interview/interview1.jpg) center center no-repeat;
 background-size: cover;
}
.people-mv.people2 {
 background: url(../images/recruit/interview/interview2.jpg) center center no-repeat;
 background-size: cover;
}
.people-mv.people3 {
 background: url(../images/recruit/interview/interview3.jpg) center center no-repeat;
 background-size: cover;
}
.people-mv.people4 {
 background: url(../images/recruit/interview/interview4.jpg) center center no-repeat;
 background-size: cover;
}
.people-mv h1.with-en {
 padding-left: 50%;
 text-align: left;
 font-size: 2.4em;
 letter-spacing: .1em;
 font-weight: bold;
 line-height: 1.6;
 color: #000;
}
.people-mv h1.with-en span {
 color: #ffda00;
 border-bottom-color: #ffda00;
}
#people-interview .profile-box {
 margin: -200px auto 0;
 background: #ffda00;
 width: 880px;
 padding: 50px 100px;
}
#people-interview .profile-box .name {
 font-size: 2em;
 font-weight: bold;
 line-height: 1.33;
 text-align: left;
 padding: 25px 50px 0 0;
 border-right: 1px solid #fff;
 margin: 0 50px 0 0;
}
#people-interview .profile-box .name span {
 font-size: .5em;
 letter-spacing: .08em;
 font-weight: normal;
 display: block;
}
#people-interview .profile-box .prof-detail {
 text-align: left;
 flex: 1;
 margin: 0;
 font-size: 1em;
 padding: 25px 0;
}
#people-interview .bg-narrow {
 overflow: visible;
 padding-top: 200px;
 margin-top: -80px;
}
#people-interview .bg-narrow::before {
 height: 90%;
}
#people-interview .bg-narrow::after {
 content: "";
 width: 300vw;
 height: 50%;
 background: #fffadd;
 transform: rotate(4deg) translateX(-50%);
 position: absolute;
 left: 0;
 top: 85%;
 z-index: -1;
}
#people-interview h2 {
 font-size: 1em;
 text-align: left;
 margin: 80px auto 50px;
}
#people-interview p {
 font-size: 1.2em;
 letter-spacing: .22em;
}
#recruit-people #entry-area {
 margin-top: 0;
}
@media (max-width: 1080px) {
 .people-mv {
  height: 82.5vw;
 }
 #people-interview .bg-narrow::after {
  bottom: -20vw;
 }
 #people-interview .profile-box {
  top: 70vw;
  width: 88vw;
  padding: 5vw 10vw;
 }
 #people-interview .profile-box .name {
  padding-right: 5vw;
  margin-right: 5vw;
 }
 #people-interview .bg-narrow {
  padding-top: 20vw;
  margin-top: -8vw;
 }
 #people-interview h2 {
  margin: 8vw auto 5vw;
 }
}
@media (max-width: 740px) {
 .people-mv h1.with-en {
  font-size: 1.1em;
 }
 #people-interview .profile-box {
  padding: 5vw;
 }
 #people-interview .profile-box .name {
  border-right: none;
  padding: 0 0 3vw;
  border-bottom: 1px solid #fff;
  margin: 0 0 3vw 0;
  font-size: 1.6em;
 }
 #people-interview .profile-box .prof-detail {
  padding: 0;
 }
 #people-interview .bg-narrow {
  margin: 0;
  padding-top: 24vw;
 }
 #people-interview .bg-narrow::after {
  bottom: -18vw;
 }
 #people-interview p {
  font-size: 1em;
 }
}


/*============================
entry
============================*/
#entry #mv {
 background: url(../images/recruit/entry/mv.jpg) center center no-repeat;
 background-size: cover;
}
#requirement {
 padding-bottom: 140px;
}
#entry-form {
 background: url(../images/recruit/entry/entry-bg.png) center top no-repeat, #ffdd1e;
 background-size: auto;
 padding: 100px 0 150px;
}
#entry #mv + #entry-form {
 margin-top: -90px;
}
#entry-form h2.with-en span {
 color: #fff;
}
#entry-form h2.with-en::before {
 background: #fff;
}
#entry button, #form button {
 font-size: 1.2em;
}
input, textarea {
 font-size: 16px;
}
input[type=radio], input[type=checkbox] {
 margin-right: 1em;
}
label {
 margin-right: 2em;
 white-space: nowrap;
}
@media (max-width: 740px) {
 .requirement-table th, .requirement-table td {
  display: block;
  width: 100%;
 }
 .requirement-table th {
  padding-bottom: 0;
  border-bottom: none;
 }
 .requirement-table td {
  padding-top: 0;
  border-top: 0;
 }
}


/*============================
contact
============================*/
#contact {
 background: #eee;
}
#contact #mv {
 background: url(../images/contact/mv.jpg) center center no-repeat;
 background-size: cover;
}
#form {
 padding-bottom: 60px;
}
.form-inner {
 width: 92%;
 max-width: 780px;
 margin: 0 auto;
}
.required {
 color: red;
}
.form-table {
 text-align: left;
 width: 100%;
 margin-bottom: 60px;
}
.form-table th, .form-table td {
 padding: 15px 0;
 font-weight: normal;
 line-height: 3;
 vertical-align: top;
}
.form-table th {
 width: 32%;
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
 padding: 15px;
 border: 1px solid #c3c3c3;
 width: 100%;
 box-sizing: border-box;
}
::placeholder {
 font-size: 1.06em;
 color: #c3c3c3;
}
button.btn {
 border: none;
}
button:focus {
 border: none;
 outline: none;
}
#contact-form a:not([class]), #contact-form a:not([class]):hover, #contact-form a:not([class]):active, #contact-form a:not([class]):visited {
 color: #e9a400;
}
.privacy_box {
 border: 1px solid #DDD;
 padding: 20px;
 margin: 10px auto;
 background-color: #FFF;
 height: 200px;
 overflow-y: scroll;
 line-height: 1.6;
}
@media (max-width: 740px) {
 #form {
  padding-bottom: 6vw;
 }
 .form-table th, .form-table td {
  display: block;
  width: 100%;
 }
 .form-table th {
  padding-bottom: 0;
 }
 .form-table td {
  padding-top: 0;
 }
}