@charset "UTF-8";
body{
width:100%;
max-width:1100px;
margin: auto;
background-color:#E6F3F1;
font-family :"メイリオ","ＭＳ Ｐゴシック","MS UI Gothic",sans-serif;
background-image:url(grapefruite.png);
/* top, left, bottom, right, center  */
background-position:right;
background-repeat:repeat-y;
/*    background-repeat:repeat-x; */
}
/* サークルディレクトリ(ホームからは第２階層)にあるcss、このフォルダのindex.html用＿各サークルはそれぞれ持ち  */
/* reset.css €  */
header,
footer.
main,
nav,
aside,
article,
section{
display: block;
}

/*  全体にかかる見出し等の書式  */

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

/* =========== 構成要素:header,nav,main,footer====== */
/*  headerの前に黒背景の全体目次を入れた  */
.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;
}

/* ===========  header,main,nav,footer  ====== */

/* header */
header{
background-color : #ffffff;
width : 100%; 
text-align : center;
}

header #center{
width : 600px;
margin: auto;
background-color : #fff;
padding-top : 20px;
padding-right : 20px;
height : 150px;
arign:left;
}
/*  ここにサブの目次を入れる  */
.mokuzi{
display: block;
background-color : #369;
height :1;
width:100%;
margin:0;
padding:0;
}
.mokuzi ul{
list-style: none; 
width:100%;
text-align : center;
margin:0;
padding:0;
display: flex; /* Flexboxコンテナとして設定 */
flex-direction:row;
}
.mokuzi li{
margin :0% 0%;
text-decoration: none;
justify-content : space-around;
	padding:1% 3%;
	margin-bottom:0;
line-height :30px;
color: #fff;
}
.mokuzi li a{
text-decoration: none;
color:white;
}

/*  メインの大枠  */
#content {
   width:100%;
   max-width:1100px;
    margin: auto;
   background-color:white;
}
hr{clear:both}
/*  左枠  */
/*  main  */
main{
width:100%;
margin:auto;
background-colorwhite;
}

/*  枠で囲む　pしかない  */
#section4,#section6 {


}
/*  右枠（目次240px）  */

/**/


/*    t */
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;
}

/**/
.jq{
padding-left : 15px;
border-right-width : 10px;
border-right-style : solid;
border-right-color : teal;
padding-right : 10px;
}
.siro{
color : #000000;
background-color : #f7f3ee;
}