@charset "UTF-8";

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

/*----------------------------------------------------------
RESET
----------------------------------------------------------*/
html{
    font-size: 62.5%;
}

body,section,header,main,footer,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,table,th,td,em {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-style: normal;
    list-style-type: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
    empty-cells: show;
}

fieldset,img,abbr {
    border: 0;
}

address,caption,cite,code,dfn,h1,h2,h3,h4,th,var {
    font-style: normal;
    font-weight: normal;
}

caption,th { 
    text-align: left;
}

li,dl {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    vertical-align:top;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    *font-size: 100%; /*to enable resizing for IE*/
}

button {
    border: none;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    outline: none;
    padding: 0;
}




/*----------------------------------------------------------
Common
----------------------------------------------------------*/
body {
    color: #707F87;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    font-size: 1.6rem;
    line-height: 1;
    position: relative;
    min-width: 1200px;
    z-index: -1;
}

main {
    position: relative;
    z-index: -1;
}

a {
    color: initial;
    text-decoration: none;
}

button,
a.contact {
    background-color: #707F87;
    border-bottom: 5px solid #4D585D;
    color: #fff;
    display: block;
    width: 300px;
}

a:hover,
button:hover {
    opacity: 0.7;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

section {
    padding: 120px 0;
}

.pc-only {
    display: block;
}

.sp-only,
.hide {
    display: none;
}

.wrap {
    margin: auto;
    position: relative;
    width: 1000px;
}

.row {
    display: flex;
    justify-content: space-between;
}

.fade-off {
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}

.fade-on {
    opacity: 1;
}

#pagetop {
    border-radius: 50%;
    background: #283135;
    cursor: pointer;
    display: none;
    position: fixed;
    right: 40px;
    bottom: 40px;
    height: 52px;
    width: 52px;
    z-index: 100;
}

#pagetop:before, #pagetop:after {
    content: '';
    background: #FFF;
    border-radius: 3px;
    position: absolute;
    top: 24px;
    height: 3px;
    width: 12px;
}

#pagetop:before {
    left: 16.5px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

#pagetop:after {
    right: 16.5px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

/* ---------- 会社概要、採用情報、お問い合わせ見出し共通 ---------- */
#company,
#recruit,
#contact {
    position: relative;
    z-index: -1;
}

#company h2,
#recruit h2,
#contact h2 {
    background-color: #707F87;
    color: #FFF;
    font-size: 6.4rem;
    font-weight: 700;
    margin-bottom: 100px;
    padding: 66px 80px 32px;
    position: relative;
    width: 860px;
    z-index: -1;
}

#company h2::before,
#recruit h2::before,
#contact h2::before {
    content: '';
    background-color: #FFF;
	display: block;
	transform: rotate(-45deg);
	position: absolute;
	bottom: -17px;
    right: -75px;
    width: 229px;
    height: 115px;
}

#company h2::after,
#recruit h2::after,
#contact h2::after {
    content: '';
    border-top: 1px solid #707F87;
    border-bottom: 1px solid #707F87;
    border-right: 1px solid #707F87;
    position: absolute;
    top: 24px;
    left: -88px;
    height: 162px;
    width: 880px;
    transform:skewX(-45deg);
}

#company .row > div,
#recruit .row > div {
    flex-basis: 50%;
}

@media screen and (max-width: 768px) {
    body {
        font-size: 3.2vw;
        min-width: 100%;
    }

    section {
        padding: 10.416vw 0;
    }

    .pc-only {
        display: none;
    }
    
    .sp-only {
        display: block;
    }

    .wrap {
        margin: 0;
        padding: 0 4vw;
        position: relative;
        width: 100%;
    }

    .row {
        flex-flow: column;
    }

    #pagetop {
        right: 4vw;
        bottom: 4vw;
    }

    /* ---------- 会社概要、採用情報、お問い合わせ見出し共通 ---------- */
    #company,
    #recruit,
    #contact {
        overflow-x: hidden;
    }

    #company h2,
    #recruit h2,
    #contact h2 {
        font-size: 8.333vw;
        margin-bottom: 13.02vw;
        padding: 8.593vw 10.416vw 4.166vw;
        width: 90vw;
    }

    #company h2::before,
    #recruit h2::before,
    #contact h2::before {
        bottom: -2.213vw;
        right: -9.765vw;
        width: 29.817vw;
        height: 14.973vw;
    }

    #company h2::after,
    #recruit h2::after,
    #contact h2::after {
        top: 3.125vw;
        left: -11.458vw;
        height: 21.093vw;
        width: 95vw;
    }
}




/*----------------------------------------------------------
Header
----------------------------------------------------------*/
header {
    padding: 40px 0;
    position: fixed;
    width: 100%;
    z-index: 999;
}

header.scroll {
    background-color: #FFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

header.scroll nav ul li a {
    color: #283135;
}

@media screen and (max-width: 768px) {
    header {
        padding: 0;
        position: relative;
    }
}




/* ----------------------------------------------------------
NAV
---------------------------------------------------------- */
nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    justify-content: flex-end;
}

nav ul li {
    font-size: 2.4rem;
    font-weight: 700;
    padding: 0 24px;
    text-align: center;
}

nav ul li a {
    color: #FFF;
}

/* sp hamburgermenu */
#toggle {
    display: none;
}

.animation {
    -webkit-transition: none;
    transition: none;
}

.mobile-nav-item {
    display: none;
}

@media screen and (max-width: 768px) {
    /* sp */
    nav {
        background-color: #4D4D4D;
        display: block;
        height: 100%;
        overflow: auto;
        position: fixed;
        top: 0;
        right: -70%;
        width: 70%;
        z-index: 400;
    }

    nav ul {
        display: block;
        padding-top: 20vw;
        width: 100%;
    }

    nav ul li {
        font-size: 2.73438vw;
        padding: 0;
        text-align: left;
    }

    nav ul li a {
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        display: block;
        padding: 3.33vw 4vw;
      }

    /* sp hamburgermenu */
    #toggle {
        color: #707070;
        display: block;
        text-align: center;
        width: 36px;
        position: fixed;
        top: 4vw;
        right: 4vw;
        z-index: 500;
    }

    #toggle span.close_text {
        color: #FFF;
        font-weight: 700;
        font-size: 14px;
        line-height: 1.5;
    }

    #toggle .trigger {
        position: relative;
        width: 36px;
        height: 29px;
    }

    #toggle .trigger span {
        display: inline-block;
        -webkit-transition: all .4s;
        transition: all .4s;
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #707070;
        border-radius: 4px;
    }

    #toggle .trigger span:nth-of-type(1) {
        top: 0px;
    }

    #toggle .trigger span:nth-of-type(2) {
        top: 13px;
    }

    #toggle .trigger span:nth-of-type(2):after {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 3px;
        background-color: #707070;
        border-radius: 4px;
        -webkit-transition: all .4s;
        transition: all .4s;
    }

    #toggle .trigger span:nth-of-type(3) {
        bottom: 0px;
    }

    #toggle .trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(8px) scale(0);
        transform: translateY(8px) scale(0);
    }

    #toggle .trigger.active span:nth-of-type(2) {
        background-color: #FFF;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    #toggle .trigger.active span:nth-of-type(2):after {
        background-color: #FFF;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    #toggle .trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-8px) scale(0);
        transform: translateY(-8px) scale(0);
    }

    .fade {
        background: rgba(51, 51, 51, 0.7);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 300;
    }
}




/*----------------------------------------------------------
Main Visual
----------------------------------------------------------*/
section.main-visual {
    padding: 0;
}

.main-visual {
    height: 100vh;
    position: relative;
}

.main-visual h1 {
    line-height: 1;
    min-width: 250px;
    width: 13.02vw;
    position: absolute;
    top: 2vw;
    left: 2vw;
    z-index: 100;
}

.main-copy {
    color: #FFFF00;
    font-size: 4rem;
    font-weight: 700;
    position: absolute;
    top: 150px;
    right: 24px;
    text-align: right;
    width: 100%;
    z-index: 100;
}

.main-copy strong {
    color: #FFC400;
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 8rem;
    margin-bottom: 16px;
}

.swiper {
    height: 100vh;
    width: 100%;
}

.swiper-wrapper .swiper-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.swiper-wrapper .slide-01 {
    background-image: url(../images/slide_01.jpg);
}

.swiper-wrapper .slide-02 {
    background-image: url(../images/slide_02.jpg);
}

.swiper-wrapper .slide-03 {
    background-image: url(../images/slide_03.jpg);
}

@media screen and (max-width: 768px) {
    .main-visual h1 {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .main-copy {
        display: none;
    }

    .swiper-wrapper .slide-01 {
        background-image: url(../images/slide_01_sp.jpg);
    }
    
    .swiper-wrapper .slide-02 {
        background-image: url(../images/slide_02_sp.jpg);
    }
    
    .swiper-wrapper .slide-03 {
        background-image: url(../images/slide_03_sp.jpg);
    }
}




/*----------------------------------------------------------
 About
----------------------------------------------------------*/
section#about {
    padding-bottom: 0;
}

#about h2 {
    margin: 0 auto 40px;
    text-align: center;
    width: 250px;
}

#about p {
    font-size: 2.6rem;
    line-height: 2;
    margin-bottom: 80px;
}

#about .images .images-item {
    flex: 1;
}

@media screen and (max-width: 768px) {
    #about p {
        font-size: 3.385vw;
        margin-bottom: 10.416vw;
    }
}




/*----------------------------------------------------------
 Company
----------------------------------------------------------*/
#company {
    background-color: #E0E4E6;
}

#company h2 {
    background-color: #FFF;
    color: #707F87;
    width: 89.583%;
}

#company h2::before {
    background-color: #E0E4E6;
}

#company h2::after {
    width: 102.666%;
}

#company table {
    background-color: #FFF;
    border-collapse: separate;
    margin: 0 0 0 auto;
    padding: 40px;
    width: 100%;
    max-width: 800px;
}

#company table td {
    color: #707F87;
    font-size: 2.8rem;
    line-height: 2;
    padding: 16px 16px 16px 0;
    vertical-align: top;
}

#company table td:first-child {
    white-space: nowrap;
}

#company table td:last-child {
    padding: 16px 0;
}

#company .images {
    text-align: right;
}

#company .images-2 {
    margin-top: 80px;
}

#company .images img,
#company .images-2 img {
    width: 100%;
    max-width: 800px;
}

#company .map {
    margin: 0 auto 0 0;
    height: 450px;
    max-width: 800px;
}

@media screen and (max-width: 768px) {
    #company h2 {
        width: 90vw;
    }

    #company h2::after {
        width: 95vw;
    }
    
    #company table {
        margin: 0 4vw;
        padding: 4vw;
        width: 92vw;
    }
    
    #company table td {
        display: block;
        font-size: 3.6458vw;
        padding: 0 0 2.083vw;
    }
    
    #company table td:last-child {
        border-bottom: 1px solid #707F87;
        padding: 0 0 2.083vw;
    }
    
    #company .images-2 {
        margin-top: 0;
    }
    
    #company .images img,
    #company .images-2 img {
        width: 100vw;
    }
    
    #company .map {
        height: 75vw;
        width: 100vw;
        max-width: initial;
    }
}




/*----------------------------------------------------------
Recruit
----------------------------------------------------------*/
section#recruit {
    padding: 120px 0 0;
}

#recruit p {
    font-size: 2.6rem;
    line-height: 2;
    letter-spacing: -1px;
    margin-bottom: 80px;
    text-align: justify;
}

#recruit .images img {
    height: 100%;
    object-fit: cover;
}

#recruit .recruit-details {
    background-color: #707F87;
    color: #FFF;
    padding: 48px 56px;
}

#recruit table {
    border-collapse: collapse;
}

#recruit table td {
    font-size: 2.4rem;
    line-height: 2;
    padding: 0 5.2083vw 40px 0;
    vertical-align: top;
}

#recruit table td:first-child {
    white-space: nowrap;
}

#recruit table td:last-child {
    padding: 0 0 40px 0;
}

#recruit table tr:last-child td {
    padding-bottom: 0;
}

#recruit table td img {
    display: block;
    width: 250px;
}

#recruit table td small {
    display: block;
    font-size: 1.8rem;
}

@media screen and (max-width: 768px) {
    section#recruit {
        padding: 10.416vw 0 0;
    }

    #recruit p {
        font-size: 3.645vw;
        margin-bottom: 10.416vw;
    }
    
    #recruit .images img {
        height: auto;
    }
    
    #recruit .recruit-details {
        padding: 6.25vw 4vw;
    }
    
    #recruit table td {
        display: block;
        font-size: 3.6458vw;
        padding: 0 0 2.083vw;
    }
    
    #recruit table td:last-child {
        border-bottom: 1px solid #FFF;
        padding: 0 0 2.083vw;
    }
    
    #recruit table td img {
        width: 32.552vw;
    }
    
    #recruit table td small {
        font-size: 2.734vw;
    }
}




/*----------------------------------------------------------
Contact Form
----------------------------------------------------------*/
.contact-form .wrap h2 {
    color: #0061a2;
    font-size: 4.8rem;
    font-weight: 300;
}

.contact-form span.required {
    background: #fa6980;
    border-radius: 12px;
    color: #FFF;
    display: inline-block;
    font-size: 11px;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 24px;
    margin-left: 8px;
    text-align: center;
    width: 54px;
    vertical-align: middle;
}

.contact-form input,
.contact-form textarea {
    background-color: #fff;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    box-sizing: border-box;
    line-height: 2;
    padding: .75rem;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    width: 100%;
}

.contact-form textarea {
    height: 200px;
}

.contact-form input:focus,
.contact-form textarea:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}

.contact-form .radio-field {
    display: block;
    line-height: 3;
}

.contact-form .radio-field input[type="radio"] {
    display: none;
}

.contact-form .radio-field input[type="radio"] + span {
    position: relative;
    display: inline-block;
    padding-left: 35px;
}

.contact-form .radio-field input[type="radio"] + span::before {
    content: '';
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    width: 24px;
    height: 24px;
    border: 1px solid #999;
    background: radial-gradient(circle, #707F87 0px, #fff 0px);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

.contact-form .radio-field input[type="radio"]:checked + span:before {
    background: radial-gradient(circle, #707F87 7px, #fff 8px);
}

.contact-form dl {
    font-size: 0;
    margin: 50px 0;
}

.contact-form dt {
    font-size: 2.4rem;
    display: inline-block;
    vertical-align: top;
    width: 350px;
}

.contact-form dd {
    display: inline-block;
    font-size: 1.8rem;
    width: 650px;
}

.contact-form .submit {
    font-size: 3.6rem;
    font-weight: bold;
    margin: auto;
    padding: 10px 50px;
}

.contact-form .post {
    margin-bottom: 30px;
    width: 30%;
}

@media screen and (max-width: 768px) {
    .contact-form .wrap {
        width: 100%;
    }

    .contact-form .wrap h2 {
        font-size: 6.4vw;
    }

    span.required {
        font-size: 3.2vw;
        padding: .1rem 1rem;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 1.5vw;
    }

    .contact-form .radio-field input[type="radio"] + span {
        margin: 0 0 1em 0;
        padding-left: 32px;
    }

    .contact-form textarea {
        height: 26.66vw;
    }

    .contact-form dl {
        font-size: 3.73vw;
        margin: 4vw 0;
    }
    
    .contact-form dt {
        display: block;
        font-size: 4vw;
        margin-bottom: 2vw;
        width: 100%;
    }
    
    .contact-form dd {
        display: block;
        font-size: 3.2vw;
        width: 100%;
    }

    .contact-form .submit {
        font-size: 6.4vw;
        padding: 2vw 6.66vw;
    }

    .contact-form .post {
        margin-bottom: 4vw;
    }
}


/*----------------------------------------------------------
Complete, Error
----------------------------------------------------------*/
.complete,
.error {
    background-color: #d4edda;
    border: 2px solid #155724;
    color: #155724;
    padding: 20px;
    position: fixed;
    text-align: center;
}

.error {
    background-color: #f8d7da;
    border: 2px solid #dc3545;
    color: #dc3545;
}

.complete strong,
.error strong {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    white-space: nowrap;
}

@media screen and (max-width: 768px) {
    .complete strong,
    .error strong {
        font-size: 4.26vw;
    }
}


/*----------------------------------------------------------
Footer
----------------------------------------------------------*/
footer {
    background-color: #242424;
    padding: 24px 0;
}

footer .copy {
    color: #FFF;
    font-size: 2.4rem;
    text-align: center;
}

@media screen and (max-width: 768px) {
    footer {
        padding: 4vw 0;
    }

    footer .copy {
        font-size: 3.2vw;
    }
}