@charset "UTF-8";
body{
width:100%;
max-width:1100px;
margin: auto;
background-color:#E6F3F1;
/* background-image:url(#);
background-position:right;
background-repeat:repeat-y; */
/* top, left, bottom, right, center */
}
/* reset.css */
header,
footer.
main,
nav,
article,
section{
display: block;
}

/* ===========:header,main,nav,footer====== */
/* header */
header{
background-color : #ffffff;
width : 100%; 
text-align : center;
}
h1{
font-size : xx-large;
line-height :50px;
width:100%;
text-align : center;
background-color : #ccc;
margin:0;
padding:0;
}

#content{
    width:100%;
    background-color:#fff;
    display: block;
}

main{
    width:100%;
    padding: 0px;
    padding-left : 0px;
}

main h2{
padding-left:8%;
}

main h3{
padding-left:10%;
}
main p{
padding-left:12%;
}
.photo{
  display: inline-block;
  width: 300px;
  margin: 10px;
  padding: 10px;
}
main ul{
padding-left:15%;
}


nav {
    width:100%;
    padding: 0px;
display: block;
    background-color:white;
    padding-left : 5%;
}

nav ul{
width:100%;
margin:auto;
}

nav li{
width : 240;
height : 60px;
float :left;
list-style-type : none;
line-height :30px;
text-align : center;
font-size : 16px;
font-weight:bold;
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: block;
}

hr{clear:both}


footer{
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%;
}

｝