@charset "utf-8";
*{color:#333;}
body{margin:0;}
    .wrapper{display:flex; flex-direction:column; min-height:30vh;}
header{
    position:fixed;
    width:100%;
    height:80px;
    z-index: 10;
}
main{
    background-color:#fff;
    z-index: 0;
}
footer{
    background-color:gray;
    position:fixed;
    bottom:0;
    height:45px;
    width:100%;
    z-index: 10;
}
h1,h2,h3,h4,h5,h6,p,table,th,td,div,ul,ol,li {
	margin: 0px;
	padding: 0px;
}
h1{font-size:30px; color:#fff; line-height: 1;}
span{line-height:1;}
p{font-size:14px; color:#333;}
em{font-size:16px; font-weight:bold; color:#740}
ul{
    list-style:none;
}
.gnav-wrap{
    background:black;
    height:80px;
}
.gnav-wrap img{
    width:80px;
    object-fit:cover;
    border-radius:3px;
    margin:0 auto;
}

.gnav-inner{
    margin-inline:auto;
    padding:0px 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.gnav-logo{
    font-size:2em;
    font-weight:bold;
    color:white;
}
.gnav-logo span{
    font-size:16px;
    font-weight:normal;
    display:block;
    color:gray;
}
.gnav-list{
    text-align:center;
    padding:0;
    display:flex;
    gap:1em
}
.gnav-list li a{
    display:block;
    font-size:16px;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
}
.gnav-list li span{
    font-size:12px;
    display:block;
    color:gray;
}
.gnav-button{
    display:none;
}
@media screen and (max-width:800px){
    .gnav{
        padding-right:1em;
    }
    .gnav-button{
        display:block;
        cursor:pointer;
    }
    .gnav-list{
        position:fixed;
        padding-top:15vh;
        top:10px;
        left:-100%;
        z-index:-1;
        width:100%;
        max-width:130px;
        height:100vh;
        flex-direction:column;
        transition:0.3s;
        background:rgba(9, 135, 60, 0.6);
    }
    .is-open .gnav-list{
        left:0;
    }
}

/*メニューボタン*/
/*ボタン本体の調整*/
.gnav-button{
    height:50px;
    width: 60px;
    background-color:transparent;
    border:none;
    position:relative;
    border-radius:10px;
}
/*「メニュー」テキスト*/
.gnav-button span{
    font-weight:bold;
    color:#fff;
    width:60px;
    position:absolute;
    top:30px;
    left:50%;
    transform:translateX(-50%);
}
/*ボタンの線*/
.gnav-button::before, .gnav-button::after, .gnav-button span::before{
    content:"";
    display:block;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:28px;
    height:2px;
    background-color:#fff;
    transition:all 0.3s;
}
.gnav-button::before{
    top:8px;
}
.gnav-button::after{
    top:24px;
}
.gnav-button span::before{
    top:-14px;
}
/*アイコンのアニメーション*/
.is-open .gnav-button::before{
    transform:rotate(45deg);
    top:16px;
    left:16px;
}
.is-open .gnav-button::after{
    transform:rotate(-45deg);
    top:16px;
    left:16px;
}
.is-open .gnav-button span::before{
    background-color:transparent;
}
/*ブラウザ幅毎の改行・非表示設定*/
@media screen and (max-width:800px){
    .pc-br{display:none;}
    .sp-br{display:block;}
    .pc{display:none !important;}
}
@media screen and (min-width:801px){
    .pc-br{display:block;}
    .sp-br{display:none;}
}
/*sectionのスタイル*/
.hero-area{
    margin-top:90px;
    height:calc(100vh - 150px);
    width:auto;
    background-image:url(image/top.jpg);
    background-repeat:repeat;
    background-color: black;
    background-size:100vw;
    background-position:center;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
.hero-title{
    color:#fff;
    text-shadow:5px 5px 5px #000000;
    margin-top:0px;
}
@media(min width:801px){
    .hero-area{
        width:100%;
        height:600px;
    }
}

/*各メニュー共通*/
.title{
    color:rgb(160, 160, 160);
    text-shadow:3px 3px 3px #b3ffac;
}
.title2{
    color:rgb(70, 70, 70);
    text-shadow:3px 3px 3px #ffacf9;
}
.content{
    margin-top:50px;
    margin-bottom:50px;
    justify-content:center;
}
@media(min-width:801px){
    .content{
        display:flex;
        flex-direction:row;
        align-items:center;
        margin-left:auto;
    }
}


/*表*/
table{
    text-align:center;
}
table tr td:nth-of-type(1){
    background-color:pink;
    padding:10px 20px
}
table tr td:nth-of-type(2){
    background-color:rgb(255, 224, 229);
    padding:10px 10px
}

/*アクセス*/
.access-area{
    padding-top:80px;
    padding-bottom:45px;
    text-align:center;
}
.access-area img{
    width:300px;
    height:300px;
    object-fit:cover;
    border-radius:50%;
    margin:0 50px;
}
.access-map-area{
    height:800px;
}
.access-map{
    width:100%;
    height:100%;
}

/*会社概要*/
.about-area{
    padding-top:80px;
    padding-bottom:45px;
    text-align:center;
}
.about-area img{
    width:90vw;
    object-fit:cover;
    border-radius:20px;
    margin:0 auto;
}
@media(min-width:801px){
    .about-area img{
        height:350px;;
        width:500px;
        object-fit:cover;
        border-radius:20px;
        margin:0 10px;
    }    
}

/*商品一覧*/
.products-area{
    padding-top:80px;
    padding-bottom:45px;
    text-align:center;
}
.products-area img{
    width:80vw;
    height:30vh;
    object-fit:cover;
    border-radius:20px;
    margin:0 auto;
}
@media(min-width:801px){
    .products-area img{
        height:200px;
        width:300px;
        object-fit:cover;
        border-radius:20px;
        margin:0 auto;
    }
}

/*お問合せ*/
.contact-area{
    padding-top:80px;
    padding-bottom:45px;
    text-align:center;
}