@charset 'UTF-8';

/* 共通 */

h5 {
    font-family: serif;
    font-size: 2.2rem;
    font-weight: bold;
    position: relative;
    margin-left: 1.8rem;
}
h5::before {
    content: '';
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    border: #aaa 1px solid;
    border-radius: 1px;
    margin: .5rem 1.8rem 0 -1.8rem;
}

/* ヘッダー */

nav li {
    color: #8e8e8e;
}

#menu_button {
    background: #3984bd;
}

.menu_mobile {
    color: white;
    background: #3984bd;
}


/* タイトル */

.page_fixed {
    width: 100%;
    height: 200px;
    position: relative;
    z-index: -1;
}

.page_cover {
    width: 100%;
    height: calc(200px + 6rem);
    position: fixed;
    top: 0;
}

.cover_company::before,
.cover_work::before,
.cover_employment::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 200px;
    top: 6rem;
}
.cover_company::before {
    background: url('../images/img13.jpg') no-repeat center;
    background-size: cover;
}
.cover_work::before {
    background: url('../images/img12.jpg') no-repeat center;
    background-size: cover;
}
.cover_employment::before {
    background: url('../images/img11.jpg') no-repeat center;
    background-size: cover;
}

/* Company */

.company_profile {
    background: white;
    display: flex;
    padding: 8rem 12vw 4rem;
}
.company_profile div:first-child {
    flex: 1;
    background: url('../images/img14.jpg');
    background-size: cover;
}
.company_profile table {
    border-collapse: collapse;
    margin: 1rem 1rem 1rem 2rem;
}
.company_profile th,
.company_profile td {
    line-height: 150%;
    border-bottom: #8e8e8e 1px solid;
    padding: .8rem;
}

/* Work */

.work_breadcrumbs {
    background: #d8e6f3;
    position: relative;
    padding: 1rem 10vw;
}
.work_breadcrumbs ul {
    display: flex;
}
.work_breadcrumbs li {
    font-size: 1.4rem;
    padding: .5rem;
}
.work_breadcrumbs li::before {
    content: '\FF1E';
    margin-right: 1rem;
}
.work_breadcrumbs li:first-child::before {
    content: '';
    margin-right: 0;
}

.work_contents {
    background: white;
    display: flex;
    padding: 0 10vw;
}
.contents_nav {
    margin: 2rem 1rem;
}
.contents_nav li {
    width: 22rem;
    border: #aaa 1px solid;
    text-align: center;
}
.contents_nav li:first-child {
    font-family: serif;
    font-size: 1.8rem;
    color: white;
    background: linear-gradient(165deg, #3984bd 0%, #3984bd 50%, #2b6692 50%, #2b6692 100%);
    padding: 1.5rem 0;
}
.contents_nav li:nth-child(n+2) {
    position: relative;
    color: #333;
    cursor: pointer;
    padding: 1.6rem 0;
}
.contents_nav li:nth-child(n+2)::after {
    content: '';
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    background: linear-gradient(135deg, transparent 0%, transparent 50%, #3984bd 50%, #3984bd 100%);
    right: 2px;
    bottom: 2px;
}
.work_contents > div:last-child {
    flex: 1;
    border: #ddd 2px solid;
    border-radius: 2px;
    padding: 3rem 1.5rem;
}

.work_contents h5::before {
    background: #3984bd;
}

/* Employment */

.employ_contents {
    background: white;
    padding: 4rem 10vw 2rem;
}
.employ_contents h5::before {
    background: #6c9a76;
}
.employ_contents > div {
    border: #ddd 2px solid;
    border-radius: 2px;
    position: relative;
    margin: 1rem 0;
    padding: 1rem 2rem 3rem;
}
.employ_contents table {
    width: 100%;
    border-collapse: collapse;
}
.employ_contents th,
.employ_contents td {
    line-height: 150%;
    border-bottom: #8e8e8e 1px solid;
    padding: 1rem;
}
.employ_contents th {
    min-width: 12rem;
}
.employ_contents span {
    display: inline-block;
    transform: rotate(90deg);
}

.employ_link {
    font-size: 1.4rem;
    position: absolute;
    right: 2rem;
    bottom: 4rem;
}
.employ_link a {
    color: #3984bd;
    text-decoration: underline;
}
.employ_link a::after {
    content: '>>';
}

/* Contact */

.contact_contents {
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 10vw;
}
.contact_contents p {
    line-height: 150%;
    text-align: center;
}
.contact_contents table {
    max-width: 1200px;
    border-collapse: collapse;
    margin-top: 4rem;
}
.contact_contents th,
.contact_contents td {
    line-height: 150%;
    border-bottom: #8e8e8e 1px solid;
    padding: 1rem;
}
.contact_contents th {
    min-width: 12rem;
}
.contact_contents td {
    font-size: 1.4rem;
}
.contact_contents tr:last-child th,
.contact_contents tr:last-child td {
    border-bottom: none;
}
.contact_contents input[type=text],
.contact_contents input[type=tel],
.contact_contents input[type=email],
.contact_contents select,
.contact_contents textarea {
    background: #e6e4e5;
    padding: .5rem;
}
.contact_contents input[type=text],
.contact_contents input[type=email],
.contact_contents input[type=tel] {
    width: 100%;
}
.contact_contents input.postcode {
    width: 40%;
    margin-bottom: .5rem;
}
.contact_contents select {
    background-image:
    linear-gradient(60deg, transparent 50%, #333 50%),
    linear-gradient(120deg, #333 50%, transparent 50%);
    background-position:
    calc(100% - 2rem) 1rem,
    calc(100% - 1.3rem) 1rem;
    background-size:.7rem 1.4rem, .7rem 1.4rem;
    background-repeat: no-repeat;
    padding-right: 3.6rem;
}
.contact_contents textarea {
    width: 100%;
    height: 15rem;
}
.contact_contents input[type=radio],
.contact_contents input[type=checkbox] {
    display: none;
}
.contact_contents label {
    position: relative;
    padding-left: 2rem;
    margin-right: 2rem;
}
.contact_contents label::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #e6e4e5;
}
.contact_contents label::after {
    content: '';
    display: none;
    position: absolute;
    top: .3rem;
    left: .3rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #35596f;
}
.contact_contents input[type=radio]:checked + label::after,
.contact_contents input[type=checkbox]:checked + label::after {
    display: block;
}
.contact_contents .require {
    font-size: 1.4rem;
    color: red;
}

.submit {
    text-align: center;
}
.submit button,
.return_btn {
    color: white;
    background: #35596f;
    padding: 1rem 4rem;
    border: #698595 1px solid;
    border-radius: 2px;
}
.return_btn {
    display: block;
    margin-top: 2rem;
}

h2 {
    font-size: 3.6rem;
    font-weight: bold;
}
h2 + p {
    font-size: 1.4rem;
    padding-bottom: 2rem;
}





/* 横幅1024px以下 */

@media screen and (max-width:1024px) {

    
}

/* 横幅799px以下 */

@media screen and (max-width:799px) {
    .page_fixed {
        height: 120px;
    }    
    .page_cover {
        height: calc(120px + 6rem);
    }
    .cover_company::before,
    .cover_work::before,
    .cover_employment::before {
        height: 120px;
    }
    
    .company_profile {
        padding: 8rem 6vw 4rem;
    }

    .work_contents {
        flex-direction: column;
        padding: 0 5vw;
    }
    
    .contents_nav {
        display: grid;
        grid-template-columns: 14rem repeat(2, minmax(18rem, 22rem));
        justify-content: center;
    }
    .contents_nav li {
        width: 100%;
    }
    .contents_nav li:first-child {
        grid-row: 1 / 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .employ_contents {
        padding: 4rem 5vw;
    }

    .contact_contents {
        padding: 4rem 5vw;
    }
    

}

/* 横幅599px以下 */

@media screen and (max-width:599px) {
    .company_profile {
        padding: 8rem 6vw 4rem 0;
    }

    .contents_nav {
        grid-template-columns: repeat(2, minmax(18rem, 22rem));
    }
    .contents_nav li:first-child {
        grid-column: 1 / 3;
    }

    .employ_link {
        position: static;
        text-align: right;
        padding-top: .5rem;
    }

}