@charset "UTF-8";
body{
width:100%;
max-width:1100px;
    margin: auto;
    background-color:#E6F3F1;
background-image:url(grapefruite.png);
/* top, left, bottom, right, center y c-x   */
background-position:right;
background-repeat:repeat-y;
/*    background-repeat:repeat-x; */
}

/* reset.css */
header,
footer.
main,
nav,
article,
section{
desplay: block;
}

h1{
font-size : xx-large;
line-height :50px;
width:100%;
text-align : center;
background-color : #ccc;
margin:0;
padding:0;
}

#content {
   width:100%;
   max-width:1100px;
    margin: auto;
   background-color:white;
}
hr{clear:both}
/* =========== \  :header,main,nav,footer====== */
/* header */
header{
background-color : #ffffff;
width : 100%; 
text-align : center;
}


main{
width:960px;
margin:auto;
background-colorwhite;
}



nav{
width : 100%;
}
nav ul{
width="900px";
margin:0auto;
}

nav li{
width : 240px;
height : 60px;
float :left;
list-style-type : none;
line-height :30px;
text-align : center;
font-size : 12px;
margin-top : 1px;
margin-right : 2px;
border-bottom-width : 2px;
border-bottom-style : solid;
border-bottom-color : gray;
padding-top : 5px;
padding-bottom : 2px;
padding-left : 5px;
border-left-width : 1px;
border-left-style : solid;
border-left-color : silver;
border-top-color : #000000;
border-top-width : 1px;
border-top-style : groove;
border-right-width : 3px;
border-right-style : solid;
border-right-color : silver;
}

   .red-button-link {
      display: inline-block; /*  */
      width : 240px;
      height : 40px;
      padding: 10px 2px; /*  */
      background-color: #007bff; /**/
      color: white; /**/
      text-decoration: none; /* */
      border-radius: 5px; /**/
      transition: background-color 0.3s, color 0.3s; /* */
    }

    .red-button-link:hover {
      background-color: #dc3545; /*  */
      color: white; /*  */
    }

    .red-button-link:active {
      background-color: #c82333; /*  */
    }

nav li a{
display: inline-block;
}
hr{clear:both}


footer{
clear : both;
color : white;
background-color : #281a2d;
height : 28px;
line-height : 150%;
width : 100%;
text-align : center;
}
footer a{
font-size : small;
font-weight : bold;
color : #d0f2cc;
}

@media screen and(max-width:768px){
main{
    width:100%;
display: block;
}

maint h2{
padding-left:0%;
}

main h3{
padding-left:2%;
}
main p{
padding-left:5%;
}
.photo{
padding-left:0%;
}
main ul{
padding-left:5%;
}

｝