@charset "UTF-8";


html{
    text-align: center;
    font-size: 100%;
    margin: auto;
    background-color: aliceblue;
    margin :20px;
}

body {
    margin: 0;
}

img {
    max-width: 100%;
    vertical-align: bottom;
    /* background-color: aliceblue; */
    /* width: ;
    height: ; */
}

div{
    color:skyblue;
    /* background-color: aliceblue; */
}

/* ここまで全体 */

/* 
header{
} */

.breadcrumb{
    display:none;
}


.nav ul{
/* text-align: right; */
/* margin */
list-style-type: none;
display:flex;
justify-content:right;
gap:40px;
}


.hero{
/* background-image: url(../images/top.jpg); */
font-size :3rem;
background-repeat:repeat;
color:rgb(71, 71, 224);

padding:300px 0;
background-size: cover;
background-position: center;

}

.hero.index{
background-image: url(../images/top.jpg);
}

.hero.type{
background-image: url(../images/fruit.jpg);
}

.hero.rare{
background-image: url(../images/ork.jpg);
}

.hero.jack{
background-image: url(../images/beam.jpg);
}

.hero.contact{
background-image: url(../images/top.jpg);
}


section{
position:relative;
}

/* .img0{
    position:absolute;
    top:0px;
    left:0px;
    z-index: 2;
}
 */


.img1{
    position:absolute;
    top:-80px;
    left: -80px;
    z-index: 2;
    width:180px;
} 

.img2{
    position:absolute;
    top:0px;
    right:-50px;
    z-index: 2;
}

.img3{
    position:absolute;
    top:-100px;
    left:-180px;
    z-index: 2;
}

.img4{
    position:absolute;
    top:-30px;
    right:-190px;
}

.img5{
    position:absolute;
    top:500px;
    left:0px;
    z-index: 2;
}


.img6{
    position:absolute;
    top:800px;
    right:0px;
    z-index: 2;
}




.items{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
gap:20px;

/* flex-direction: row,column;
flex-wrap: wrap;
justify-content:space-around; */

}

.culmn{
width: calc((100% - 20px * 2) / 3);
}


p{
   margin: 40px ; 
   margin-bottom: 100px;
   text-align: center;
}

tr,td,th{
       text-align: left;
}

th{
    color: blue;
}


div.tr{
background-color:antiquewhite
}


h1{
    max-width:100%;
    color:brown;
    background-color:burlywood ;
    text-align: center;
}

h2{
    max-width:100%;
    color: gold;
    background-color:burlywood ;
    text-align: center;
}

h2.matome{
    margin-top:2rem ;
    margin-bottom:4rem ;
    
}




/* .type{
    text-align: center;
}
 */


.typediv{
    text-align: center;
    width:70%;
    height:auto;
    /* padding-top: 100px; */
    padding-bottom: 50px;
    margin:0 auto;
}

/* ここからフッター */

footer{
    height: 300px;
    margin :20px;
    margin-top:300px;


    background-image: url(../images/top2.jpg);

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


.footer.type{
    background-image: url(../images/mugi.jpg);

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    }


.footer.rare{
    background-image: url(../images/brown.png);

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    }

.footer.jack{
    background-image: url(../images/cocktail.jpg);

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    }