@charset "utf-8";

/* 全体コンテンツ
---------------------------------------------- */
section {
    margin: 13rem auto;
    padding: 0 7rem;
}

section h2 {
    /* color: #000; */
    font-size: 2.4rem;
    font-weight: normal;
    margin: 0 7rem 9rem 0;
    line-height: 1.2;
}

section h2 span {
    display: inline-block;
    font-size: 8rem;
    font-weight: 500;
    margin-bottom: 3.6rem;
    padding-bottom: 2.4rem;
    border-bottom: 1px solid #fff;
}

section p {
    margin-bottom: 1em;
    letter-spacing: normal;
    line-height: 2;
}

section p + p {
    margin-top: 1em;
}

@media screen and (max-width: 1024px) {
    section {
        margin: 6rem auto 7rem;
        padding: 0 4rem;
    }
    
    section h2 {
        margin: 0 0 6rem;
    }
    
    section h2 span {
        font-size: 6rem;
    }
}

@media screen and (max-width: 767px) {
    section {
        margin: 5rem auto 6rem;
        padding: 0 2rem;
    }
    
    section h2 {
        font-size: 2rem;
        margin: 0 0 4.5rem;
    }
    
    section h2 span {
        font-size: clamp(4.5rem, 10vw, 6rem);
        margin-bottom: 3rem;
    }
}


/* フォーム（全体）
------------------------------- */
.required {
    color: #f00;
    margin-left: 0.5rem;
}

form {
    max-width: 1183px;
    width: 100%;
}

form a {
    text-decoration: underline;
    color: #000;
}

form table p {
    margin-bottom: 0;
}

form th {
    width: 20.3%;
    padding: 0 1em 1em 0;
    white-space: nowrap;
}

form td {
    padding-bottom: 1em;
}

form td input {
    width: 100%;
    height: 40px;
    padding: 0.5rem;
    border: 1px solid #dfdfdf;
}

form td input[type="radio"],
form td input[type="checkbox"] {
    width: auto;
    height: auto;
    border: 1px solid #dfdfdf;
    margin-right: 1.4rem;
}

form td textarea {
    width: 100%;
    height: 190px;
    padding: 0.5rem;
    border: 1px solid #dfdfdf;
}

form .btn-submit {
    padding: 5rem 0 0;
}

form ul.btn-submit {
    display: flex;
    justify-content: center;
    padding: 0;
}

form .btn-submit li {
    list-style-type: none;
    margin-bottom: 0;
}

form .btn-submit input {
    width: 280px;
    height: auto;
    background-color: #222222;
    color: #fff;
    font-size: 1.8rem;
    border: none;
    padding: 1.8rem 0;
    cursor: pointer;
}

form .btn-submit input.btn-reset {
    color: #000;
    background-color: #ccc;
    margin-right: 2rem;
}

form .btn-submit p {
    margin-bottom: 0;
}

/* タブレット・スマホ無効 */
@media screen and (min-width: 960px) {
    form a:hover {
        color: #032361;
        text-decoration: none;
    }
    
    form .btn-submit input {
        transition: 0.3s;
    }
    
    form .btn-submit input:hover {
        opacity: 0.7;
    }
}

@media screen and (max-width: 767px) {
    form th {
        display: block;
        width: 100%;
        padding: 0 0 0.5em;
    }

    form td {
        display: block;
        padding-bottom: 1.5em;
    }
    
    form td input[type="radio"],
    form td input[type="checkbox"] {
        margin-right: 1rem;
    }
    
    form .btn-submit {
        padding: 1rem 0 0;
    }

    form .btn-submit input {
        width: 100%;
    }
    
    form .btn-submit input.btn-reset {
        margin: 0 0 2rem;
    }
}


/* ----------------------------------------------
トップページ
---------------------------------------------- */

/* メインイメージ
---------------------------------------------- */
.mainVisual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.mainVisual::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    z-index: 1;
}

.mainVisual_img {
    width: 100%;
    height: calc(80vh - 118px);
}
.mainVisual_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mainVisual_sp {
    display: none;
}

.mainVisual p {
    color: #fff;
    /* background-color: #000; */
    font-size: clamp(4.7rem, 4vw, 5.8rem);
    font-weight: bold;
    text-align: center;
    padding: 0 4.5rem;
    line-height: 1.6;
    position: absolute;
    width: 88%;
    max-width: 1250px;
    z-index: 2;
}

@media screen and (max-width: 1024px) {
    .mainVisual p {
        font-size: clamp(3.4rem, 4.4vw, 4.7rem);
    }
}

@media screen and (max-width: 767px) {
    .mainVisual_img {
        height: auto;
    }
    .mainVisual_img img {
        height: auto;
        object-fit: unset;
    }
    .mainVisual p {
        font-size: clamp(1.6rem, 3.1vw, 2.4rem);
        padding: 0 2rem;
    }
}

@media screen and (max-width: 666px) {
    .mainVisual_pc {
        display: none;
    }

    .mainVisual_sp {
        display: block;
    }
    
    .mainVisual p {
        /* background-color: rgba(0,0,0,0.75); */
        margin: 0 2rem;
        padding: 1rem 2rem;
        line-height: 1.4;
    }
}



/* 会社概要
---------------------------------------------- */
#company {
    background-color: #353535;
    margin: 0 auto;
    padding: 13rem 7rem;
}

.company-inner {
    max-width: 1183px;
    width: 100%;
}

#company dl {
    display: flex;
}

#company dt {
    width: 20.4%;
    margin-right: 4rem;
    padding: 2rem 0;
    border-bottom: 1px solid #7f7f7f;
    white-space: nowrap;
}

#company dd {
    width: 76.6%;
    padding: 2rem 0;
    border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 1024px) {
    #company {
        padding: 6rem 4rem 7rem;
    }
}

@media screen and (max-width: 767px) {
    #company {
        padding: 5rem 2rem 6rem;
    }
    #company h2 span {
        font-size: clamp(3.6rem, 9vw, 6rem);
    }
    
    #company dl {
        flex-direction: column;
    }
    #company dt {
        width: 100%;
        margin-right: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    #company dl:first-of-type dt {
        
    border-top: 1px solid #ccc;
    }
    #company dd {
        width: 100%;
    }
}


/* 事業案内
------------------------------- */
#business {
    /* width: 96.3%; */
    background-color: #222222;
    margin: 0;
    padding: 9rem 7rem 3rem;
}

#business h2 {
    color: #fff;
}

#business h2 span {
    border-color: #fff;
}

.business-inner {
    margin-top: 60px;
    /* margin-bottom: -170px; */
    gap: 1rem;
    align-items: start;
    flex-grow: 1;
}

.business-box {
    position: relative;
    /* background-color: #000; */
    border: 1px solid #eeeeee;

    flex: 1;
    height: 150px;
}

.business-box h3 {
    /* min-width: 285px; */
    color: #fff;
    /* background-color: #032361; */
    font-size: clamp(2rem, 1.31vw, 2.5rem);
    padding: 1.8rem 2rem;
    line-height: 1.5;
    /* position: absolute;
    top: 40px;
    left: 0; */
}

.business-box h3 span {
    display: block;
    font-size: 2rem;
    font-weight: 500;
}

@media screen and (max-width: 1499px) {
    #business {
        /* flex-direction: column; */
    }
    
    .business-inner {
        /* margin-top: 0; */
    }

    .business-box h3 {
        font-size: clamp(1.8rem, 1.33vw, 2rem);
        /* font-size: clamp(2rem, 1.9vw, 2.5rem); */
    }
    .business-box h3 span {
        font-size: clamp(1.2rem, 1.06vw, 1.6rem);
    }
}

@media screen and (max-width: 1024px) {
    #business {
        /* width: 100%; */
        flex-direction: column;
        padding: 6rem 4rem;
    }
    
    .business-inner {
        margin-bottom: 0;
    }
    
    .business-box h3 {
        min-width: 0;
        font-size: clamp(1.5rem, 2vw, 2rem);
        line-height: 1.8;
    }
    
    .business-box h3 span {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 767px) {
    #business {
        width: 100%;
        padding: 5rem 2rem;
    }
    
    #business h2 span {
        font-size: clamp(3.3rem, 9vw, 6rem);
    }
    
    .business-box {
        width: 100%;
        height: auto;
        flex: unset;
    }
    .business-box:nth-child(n+2) {
        margin-top: 4rem;
    }
    
    .business-box h3 {
        font-size: 2.3rem;
        line-height: 1.5;
    }
    
    .business-box h3 span {
        font-size: 2rem;
    }
}


/* 交通アクセス
------------------------------- */
#access {
    margin: 13rem auto;
    /* margin: 28rem auto 13rem; */
}

.access-text {
    margin-right: 7rem;
}

#access iframe {
    max-width: 1183px;
}

@media screen and (max-width: 1024px) {
    #access {
        margin: 6rem auto 7rem;
    }
    
    .access-text {
        margin-right: 0;
    }
    
    #access iframe {
        margin-top: 4rem;
    }
}

@media screen and (max-width: 767px) {
    #access {
        margin: 5rem auto 6rem;
    }
    
    #access iframe {
        height: 317px;
        margin-top: 3rem;
    }
}


/* お問い合わせ　エントリーフォーム
---------------------------------------------- */
#contact, .entry {
    color: #000;
}
#contact h2 span,
.entry h2 span {
    border-bottom: 1px solid #000;
}

#contact, .entry {
    background-color: #fafafa;
    margin: 0 auto;
    padding: 12rem 7rem;
}


@media screen and (max-width: 1024px) {
    #contact, .entry {
        padding: 6rem 4rem;
    }
}

@media screen and (max-width: 767px) {
    #contact, .entry {
        padding: 5rem 2rem;
    }
}


/* ----------------------------------------------
採用情報
---------------------------------------------- */

/* ページタイトル
------------------------------- */
.recruit .page-title {
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 4rem;
    position: relative;
}
.recruit .page-title::before {
    content: '';
    display: block;
    width: 100vw;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.recruit .page-title-img {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}
.recruit .page-title-img img {
    width: 100%;
    max-height: 550ox;
    object-fit: cover;
}

.recruit .page-title h1 {
    color: #fff;
    font-size: 2.4rem;
    font-weight: normal;
    line-height: 1.6; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index: 2;
}

.recruit .page-title h1 span {
    display: inline-block;
    font-size: 8rem;
    font-weight: bold;
}

@media screen and (max-width: 1024px) {
    .recruit .page-title h1 span {
        font-size: 6rem;
    }
}

@media screen and (max-width: 767px) {
    .recruit .page-title {
        height: 200px;
        background: url(../images/img_recruit_title.jpg) no-repeat;
        background-size: cover;
        background-position: 60%;
        padding: 0 2rem;
    }
    
    .recruit .page-title-img {
        display: none;
    }
    
    .recruit .page-title h1 {
        font-size: 2rem;
    }
    
    .recruit .page-title h1 span {
        font-size: 4.5rem;
    }
}




/* ----------------------------------------------
プライバシー
---------------------------------------------- */

/* ページタイトル
------------------------------- */
.privacy .page-title {
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 4rem;
}

.privacy .page-title h1 {
    background-color: #fafafa;
    width: 100vw;
    font-size: 2.4rem;
    font-weight: normal;
    margin: 0 calc(50% - 50vw);
    padding: 6rem calc(50vw - 50%);
    line-height: 1.6;
    color: #000;
}

.privacy .page-title h1 span {
    display: inline-block;
    font-size: 8rem;
    font-weight: bold;
}

@media screen and (max-width: 1024px) {
    .privacy .page-title h1 {
        padding: 4.8rem calc(50vw - 50%);
    }
    
    .privacy .page-title h1 span {
        font-size: 6rem;
    }
}

@media screen and (max-width: 767px) {
    .privacy .page-title {
        padding: 0 2rem;
    }
    
    .privacy .page-title h1 {
        font-size: 2rem;
    }
    
    .privacy .page-title h1 span {
        font-size: 4.5rem;
    }
}


/* 本文
------------------------------- */
.privacy section {
    max-width: 1520px;
    padding: 0 4rem;
}

.privacy h2 {
    font-size: 3.2rem;
    font-weight: bold;
    margin: 2em 0 1em;
    padding-bottom: 1rem;
    border-bottom: 1px solid #fff;
    line-height: 1.6;
}

.privacy ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.privacy ol li {
    list-style-type: decimal;
    margin-bottom: 1em;
    padding-left: 0.5em;
}

.privacy ol ol {
    margin-top: 1em;
}

@media screen and (max-width: 767px) {
    .privacy section {
        padding: 0 2rem;
    }
    
    .privacy h2 {
        font-size: 2.4rem;
    }
}