@charset "UTF-8";

body{
width:100%;
max-width:1100px;
margin: auto;
background-color:#E6F3F1;
            font-family :"メイリオ","ＭＳ Ｐゴシック","MS UI Gothic",sans-serif;

/* background-image:url(tokoron.jpg);
background-position：right;
background-repeat: no-repeat space;  */

/* top, left, bottom, right, center y c-x 最初の値は水平  */
/*  background-position:right;  */
/*  background-repeat:repeat-y; */
/*  background-repeat:repeat-x; */
/*  background-repeat: no-repeat; */
/*  background-repeat: no-repeat space;  */
/*  background-repeat: space; サイズ不足は空白 */
/*  background-repeat: round;　同、引き伸ばし */
/*  background-repeat:repeat-x; */
}

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


/* =========== 構成要素:headernav,,main,foote r====== */
/* header */
header{
background-color : #666;
width : 100%; 
background-image:url(hed-bg.jpg);
}
h1{
font-size : xx-large;
line-height :50px;
width:100%;
text-align : center;
background-color : #ccc;
margin:0;
padding:0;
}
.topnav{
display: block;
font-size : small;
font-weight : bold;
line-height :3;
width:100%;
text-align : center;
color:#fff;
background-color : #333;
margin:0;
padding:0;
}
.topnav ul{
list-style: none; 
width:100%;
text-align : center;
margin:0;
padding:0;
    display: flex; /* Flexboxコンテナとして設定 */
　　flex-direction:row;
gap:20px;
}
/topnav li{
margin :0% 0%;
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 :3;
color: #fff;
}
.topnav li a{
text-decoration: none;
color:white;
}




/*  基本、パソコン対応  */
.container {
    display: flex; /* Flexboxコンテナとして設定 */
　　flex-direction:row;
    width: 100%;
    min-height: 100vh; /*画面全体の高さを確保（必要に応じて調整） */
}

.main-content {
    flex-grow: 1;     /* 最初の表示は3。⇒サイドバーの3倍の幅を占める (例: 75%相当) */
    flex:auto;
    padding: 0px;
    background-color: #f4f4f4;
}

/* 会のイメージ（第一印象）  */
#section1 {
	padding-top :20px;
	text-aling:left;
	}
.image1 {
  display: flex; /* 子要素を横並びにする */
  align-items: center; /* 縦方向の中央揃え */
  gap: 20px; /* 画像とテキストの間の隙間 */
  /* flex-direction: row; (デフォルト) */
}

.image1 img {
  max-width: 400px; /* 画像の最大幅 */
  height: auto;
  margin-left:30px;
padding:20px;
  
}
#section1 .description {
  /* テキスト部分のスタイル */
	font-size : large;
margin-right:30px;
}

#section1 h2{
	font-size : x-large;
	line-height :50px;
	text-align : center;
	color : black;
	background-color : #ccc;
	margin:0;
	padding:0;
	}

#section1 .photo{
width : 40%;
}


/* =========== サークル　位置　右寄せ・左寄せ ====== */
#section2{
	padding-top :0px;
	}
#section2 h2{
	font-size : x-large;
	line-height :50px;
	text-align : center;
	color : black;
	background-color : #ccc;
	margin:0;
	padding:0;
	}

#section2 h3{
	line-height :50px;
	text-align : left;
	color : #000k;
	background-color : #fff;
	margin:1%;
	padding:2%;
	}
#section2 p{
padding:0% 10%;
}

#section2 .circle{
	display: flex;
        flex:auto;
	flex-wrap: wrap;
	gap: 5px;
	}

#section2 .yanasebox{
	width:40%;
	margin-left:10px;
	background-color:ivory;
	padding:8px 15px;
	border-top-width : 1px;
	border-top-style : solid;
	border-top-color : silver;
	border-right-width : 10px;
	border-right-style : solid;
	border-right-color : silver;
	margin-bottom:30px;
	border-bottom-width : 12px;
	border-bottom-style : solid;
	border-bottom-color : #c4a3bf ;
	border-left-width : 1px;
	border-left-style : solid;
	border-left-color : silver;
	}

section2 .yanasebox p{
	margin:0;
	padding:0;
	}

#section2 .year {
width:100%;
margin-left:2%
padding:3% 10%;
}
.year h3{
padding-left:5%;
}

/* ここから、続きを読む */


/* ここまで続きを読む */

/* サイドバーについての設定 */
.sidebar-toc {
  width: 250px; /* 目次の固定幅を指定 (例: 250px) */
  flex-shrink: 0; /* 幅を縮めないように設定 */
  /* flex-basis: 250px; としても同様の効果が得られます */
  /* 必要に応じて他のスタイル (background, padding, position: fixedなど) を追加 */
    background-color: #e9e9e9;
    padding: 15px;
    border:1px solid #ddd;
}

/* 会の概要（事務的）  */
/*  基本、パソコン対応  */
#section3 {
padding-top :80px;
text-aling:left;
padding-left : 20px;
background-color : #e9e9e9;
}

/* 役員紹介  */
#section3 h2{
font-size : x-large;
line-height :50px;
text-align : center;
color : black;
background-color : #ccc;
margin:0;
padding:0;
}
#section3 .flex{
display:flex;
}
#section3 .table1{
  display: table;
  width: 70%;
margin-bottom:20px;
padding-left:50px;
}

#section3 .rowbox {
  margin-left: 5px;
  border-right: 0px solid #888;
  border-bottom: 2px solid #aaa;
  border-left: 0px solid #888;
}
#section3 .bt2 {
  border-top: 2px solid #aaa;
}
#section3 .bb2 {
  border-bottom: 2px solid #aaa;
}
#section3 .col1box {
  display: table-cell;
  width: 12%;
  vertical-align: top;
  line-height: 20px;
  padding: 2px 5px 5px 5px;
  border-left: 2px solid #bbb;
}

#section3 .col2box {
  display: table-cell;
  width: 10%;
  vertical-align: top;
  line-height: 20px;
  padding: 2px 5px 5px 5px;
  border-left: 2px solid #bbb;
}
#section3 .col3box {
  display: table-cell;
  width: 16%;
  vertical-align: top;
  line-height: 20px;
  padding: 2px 5px 5px 5px;
  border-left: 2px solid #bbb;
  border-right: 2px solid #bbb;
}

#section3 div .col2box p {
  margin-top: 5px;
}
/*  */
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){
			body{
			font-size: clamp(16px, 1.8vw, 30px);
			}

			nav{
			padding:0;
			margin:0;
			}
			nav li{
			width;30%;
			}
			.container {
	    		display: block; /* Flexboxコンテナとして設定したものを否定 */
			/*    min-height: 100vh; /*画面全体の高さを確保（必要に応じて調整） */
			}
			.main-content {
			width: 100%;
			padding: 0px;
			}


/* 会のイメージ（第一印象）  */
			#section1 {
			padding-left : 5%;
			}
.image1 {
  display: block; /* 子要素を横並びにする */
  align-items: center; /* 縦方向の中央揃え */
  gap: 3%; /* 画像とテキストの間の隙間 */
  /* flex-direction: row; (デフォルト) */
}

.image1 img {
  max-width: 100%; /* 画像の最大幅 */
  height: auto;
  margin-left:0px;
padding:0px;
  
}

#section1 .description {
  /* テキスト部分のスタイル */
	font-size : large;
margin-right:0px;
}

#section1 h2{
	font-size : x-large;
	line-height :50px;
	text-align : center;
	color : white;
	background-color : #000;
	margin:0;
	padding:0;
	}
#section1 p{
padding-left:2%;
}
			/* ここからsection2に付いてのスマホ対応 */

#secton2 h2,h3,p{
padding:0;
margin:0;
}

#section2 .photo{
width:100%;
padding:0;
margin:0;
}

/* =========== サークル　位置　右寄せ・左寄せ ====== */
			#section2 .circle{
			display: flex;
		        flex:auto;
			flex-wrap: wrap;
			}

			#section2 .ivorybox{
			width:80%;
			margin-left:2%
			padding:3% 10%;
			margin-bottom:3%;
			border-bottom-width : 3%;
			border-bottom-style : solid;
			border-bottom-color : #c4a3bf ;
			border-right-width : 3%;
			border-right-style : solid;
			border-right-color : silver;
			}
#section2 .yanasebox{
	width:100%;
}

			/* サイドバーについての設定 */
			.sidebar-toc {
			width:100%;
			}
			/* セクション３についての設定 */
			#section3 {
			padding-top :5%;
			padding-left: 2%;
			}

			/* 役員紹介  */
			#section3 .flex{
			display:block;
			}
			#section3 .table1{
 			 display:block;
 			 width: 90%;
			margin-bottom:0px;
			padding-left:0px;
			}

			#section3 .rowbox {
			  margin-left: 0px;
			  border-right: 0px solid #888;
			  border-bottom: 2px solid #aaa;
			  border-left: 0px solid #888;
			}
			#section3 .bt2 {
			  border-top: 2px solid #aaa;
			}
			#section3 .bb2 {
			  border-bottom: 2px solid #aaa;
			}
			#section3 .col1box {
			  display: table-cell;
			  width: 12%;
			vertical-align: top;
 	 		line-height: 2;
 			 padding: 0;
  			border-left: 2px solid #bbb;
			}

		#section3 .col2box {
		  display: table-cell;
		  width: 10%;
		  vertical-align: top;
		  line-height: 2;
		  padding: 2px 5px 5px 5px;
		  border-left: 2px solid #bbb;
		}
		#section3 .col3box {
		  display: table-cell;
		  width: 16%;
		  vertical-align: top;
		  line-height: 2;
		  padding: 2px 5px 5px 5px;
		  border-left: 2px solid #bbb;
		  border-right: 2px solid #bbb;
		}

		#section3 div .col2box p {
  		margin-top: 5px;
		}
	}



/* スマホ
　　　 @media screen and (max-width: 428px) {
　　　 ここにスマホ用のCSSを記述する
 　　　}
タブレット
 @media only screen and (min-width: 600px) and (max-width: 1024px) {
ここにタブレット用のCSSを記述
 }
パソコン
 @media screen and (min-width: 1024px) {
ここにPC用のCSSを記述する
 } */