@charset "UTF-8";
body{
width:100%;
font-size: clamp(16px, 2.5vw, 24px);
}

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

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

h2{
text-align:center;
color:#e8d3c7 ;
background-color:#a4171c;
}
h3{
padding-top:5px;
padding-left:2%;
}
p{
padding-left:4%;
}
.small{
font-size:small;
}


.topnav{
display: block;
background-color : #000;
height :1;
width:100%;
margin:0;
padding:0;
}
.topnav ul{
list-style: none; 
width:100%;
text-align : center;
margin:0;
padding:0;
display: flex; /* Flexboxコンテナとして設定 */
flex-direction:row;
}
.topnav li{
margin :0% 0%;
text-decoration: none;
justify-content : space-around;
	padding:1% 3%;
	margin-bottom:0;
/*	border-bottom-width : 2px;
	border-bottom-style : solid;
	border-bottom-color : #c4a3bf ;
	border-right-width : 1px;
	border-right-style : solid;
	border-right-color : silver;  */
line-height :30px;
color: #fff;
}
.topnav li a{
text-decoration: none;
color:white;
}



.content{
background-color:white;
}


.year{
padding-top : 5px;
padding-bottom : 2px;
padding-left : 5px;
border-top-color : #000000;
border-top-width : 2px;
border-top-style : groove;
border-right-width : 3px;
border-right-style : solid;
border-right-color : silver;
border-bottom-width : 2px;
border-bottom-style : solid;
border-bottom-color : gray;
border-left-width : 2px;
border-left-style : solid;
border-left-color : silver;
}

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

@media screen and (min-width: 786px){
body{
	width:100%;
	max-width:1100px;
	background-image:url(rose1217.png);
font-size:16px;
}
.content{
width:80%;
margin-left:200px;
background-color:white;
}

h3{
width:100%;
padding-left:50px;
padding-top:1%;
}
p{
padding-left:120px;
}
}