@charset "utf-8";

body {
    margin: 0 auto;
}

/* ヘッダー */
header {
    width: 100%;
    background: rgba(20, 20, 20, 0.8);
    padding: 0 15px;
    position: fixed;
    top: 0;
    /* ↓優先順位が高くなるように設定する */
    z-index: 2;
}

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

h1 {
    margin-block-start: 0.1em;
    margin-block-end: 0.1em;
    line-height: 1.5;
}

nav {
    display: flex;
    margin: 0 30px;
}

.nav-ul .nav-list {
    padding: 0 10px;
    display: inline-block;
}

.nav-list {
    list-style: none;
}

.nav-text {
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}

.anchor {
    display: block;
    padding-top: 54px;
    margin-top: -54px;
}

/* メニューバーのホバー */
.nav-text {
    position: relative;
    /*アンダーラインの位置を決めるための基準 */
}

.nav-text::after {
    position: absolute;
    /*親要素であるaタグを基準に位置を指定*/
    left: 0;
    /*アンダーラインを各メニュー（aタグ）の左端に指定*/
    content: '';
    /*本来は、擬似要素に入るテキストなどを’’内に指定。今回はアンダーラインなので何も記載しない*/
    width: 100%;
    height: 1px;
    background: #d3d3d3;
    visibility: hidden;
    opacity: 0;
}

.nav-text:hover::after {
    visibility: visible;
    opacity: 1;
    transition: all 0.4s ease 0s;
}


.main-text {
    font-size: 25px;
    color: #fff;
    font-family: "ヒラギノ明朝 ProN";
    /* 背景画像に文字入れ(relativeと一緒に使う) */
    position: absolute;
    left: 50%;
    top: 50%;
    /* 中央に配置するために入力する */
    transform: translate(-50%, -50%);
}

/* メインビジュアルの画像フェードインアウト */
.img-wrap {
    position: relative;
    margin: 0 auto;
}

.img-wrap .img01 {
    height: 700px;
    width: 100%;
    position: absolute;
}

/* h2テキストを黒に */
.black001 {
    font-size: 25px;
    font-family: "ヒラギノ明朝 ProN";
    text-align: center;
    display: inline-block;
    padding: 0 10px;
}

/* h3テキストをh2の横並びにする */
.black002 {
    color: #676666;
    font-size: 13px;
    display: inline-block;
}

/* 事業内容・沿革・お問い合わせのタイトルと小見出し */
.menu01 {
    text-align: center;
    border-bottom: 1px solid #000;
    width: 400px;
    margin: 0 auto 50px;
}

/* 会社概要のタイトルと小見出し */
.menu03 {
    text-align: center;
    border-bottom: 1px solid #fff;
    width: 400px;
    margin: 0 auto;
}

/* 山林売却〜求人情報までのタイトルと小見出し */
.menu02 {
    text-align: center;
    border-bottom: 1px solid #000;
}

/* 会社概要の文字を白にする */
.white001 {
    font-size: 25px;
    font-family: "ヒラギノ明朝 ProN";
    text-align: center;
    display: inline-block;
    color: #fff;
    padding: 0 10px;
}

.white002 {
    color: #acacac;
    font-size: 13px;
    display: inline-block;
}



/* ここから事業内容 */
.business-wrapper {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin: 0 auto;
}

.business-box01 {
    padding: 50px 0 100px;
    position: relative;
    margin: 700px 0 0;
}

.business-box02 {
    text-align: center;
}

.business-photo {
    height: 249px;
    width: 444px;
}

h4 {
    font-size: 18px;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

.business-text {
    text-align: left;
    display: inline-block;
    font-size: 15px;
    line-height: 1.8;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

/* ここまで事業内容 */

/* ここから会社概要 */
.company-box {
    background-image: url(./会社概要2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px 0 100px;
}

.company-text {
    text-align: center;
    display: block;
    margin: 16px auto;
}

dl {
    color: #fff;
    text-align: left;
    display: inline-block;
}

dt {
    font-size: 18px;
    font-weight: bold;
    padding: 0 0 2px;
}

dd {
    font-size: 18px;
    padding: 0 0 10px;
}

/* ここまで会社概要 */

/* ここから沿革 */
.history-box {
    background-image: url(./Histry-background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px 0 100px;
}

.history-wrapper {
    display: flex;
    justify-content: center;
}

.history-text {
    font-size: 20px;
    list-style: none;
    margin-block-start: 0em;

}

li {
    padding: 0 0 18px;
}

/* ここから山林売却 */
.forest-wrapper {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 100px 0;
    background: #f4f4f4;
}

.forest-text {
    font-size: 15px;
    line-height: 1.8;
}

/* ここから求人情報 */
.job-wrapper {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 100px 0;
}

.job-text01 {
    font-weight: bold;
    font-size: 18px;
    line-height: 1.5;
}

.job-text02 {
    font-size: 15px;
    line-height: 1.8;
}

/* ここからnews */
.news-box {
    background-color: #f4f4f4;
    padding: 50px 0 100px;
}

.news-btn {
    border: 1px solid #acacac;
    border-radius: 20px;
    padding: 10px 150px;
    background-color: #fff;
    margin: 0 auto;
    width: 400px;
}

.news {
    text-decoration: none;
}

.news-top {
    color: #000;
    font-size: 15px;
}

.news-top:hover {
    border-bottom: 1px solid #000;
    display: inline-block;
}



/* ここからお問い合わせ */
.info-box {
    background-image: url(./footer.jpg);
    background-position: bottom;
    background-size: 100%;
    padding: 50px 0;
    background-repeat: no-repeat;
}

.info-center {
    text-align: center;
}

.info-text {
    font-size: 25px;
    display: inline-block;
    text-align: left;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

span {
    font-size: 20px;
}

.link-wrapper {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 50px 0;
}


.mail {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    border-radius: 20px;
    padding: 15px 20px;
    border: 1px solid #676666;
    background-color: #a3a3a3;
}

.mail:hover {
    background-color: #fff;
    color: #000;
    transition: all 0.5s ease 0s;
}

.mail-pic {
    height: 23px;
    padding: 0 5px 5px;
    vertical-align: middle;
}

/* ここまでお問い合わせ */



/* レスポンシブ対応　タブレットサイズ 960px以下の場合に適用*/
@media screen and (max-width: 960px) {

    .header-flex {
        display: block;
    }

    h1 {
        text-align: center;
    }

    .img-wrap .img01 {
        width: 100%;
        max-width: 960px;
        width: 100%;
        /* 横縦比・高さを変えずに調節 */
        object-fit: cover;
    }

    .main-text {
        /* top: 37%; */
    }

    .business-wrapper {
        display: block;
    }

    .business-box02 {
        margin: 0 auto 50px;
    }

    .forest-wrapper {
        display: block;
        text-align: center;
    }

    .menu02 {
        width: 400px;
        margin: 0 auto 50px;
    }

    .forest-text {
        margin: 0 0 50px;
    }

    .job-wrapper {
        flex-direction: column-reverse;
        text-align: center;
    }

    .news-btn {
        width: 400px;
    }
}

/* レスポンシブ対応　スマホサイズ 520以下の場合に適用px*/
@media screen and (max-width: 520px) {

    header {
        padding: 0;
    }

    ul {
        padding: 0;
        text-align: center;
    }

    nav {
        margin: 0 auto;
    }

    .nav-ul .nav-list {
        padding: 5px 10px;
    }

    /* メインビジュアル */
    .img-wrap .img01 {
        max-width: 520px;
    }

    .business-photo {
        width: 70%;
        height: 70%;
    }

    .main-text {
        font-size: 20px;
    }

    .menu01 {
        width: 200px;
    }
    .menu03 {
        width: 200px;
    }
    .menu02 {
        width: 200px;
    }
    
    

    /* 会社概要 */
    dt {
        font-size: 15px;
        font-weight: bold;
        padding: 0 0 2px;
    }

    dd {
        font-size: 15px;
        padding: 0 0 10px;
    }

    /* 沿革 */
    .history-text {
        font-size: 15px;
        padding: 0;
    }

    .history-img {
        width: 65%;
    }

    /* 山林売却と求人の画像 */
    .section-img {
        width: 70%;
    }

    .news-btn {
        width: 150px;
        padding: 0 100px;
    }

    .info-text {
        font-size: 18px;
    }

    span {
        font-size: 15px;
    }

}