@charset "UTF-8";
body{
width:100%;
max-width:1100px;
margin: auto;
background-color:#E6F3F1;
background-image:url(#);
/* 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;
}
/* =========== 構成要素:headernav,,main,foote r====== */
/* header */
header{
background-color : #666;
width : 100%; 
text-align : center;
}

/*  基本、パソコン対応  */
.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 :80px;
	text-aling:left;
	padding-left : 5%;
	}
#section1 h2{
	font-size : x-large;
	line-height :50px;
	text-align : center;
	color : white;
	background-color : #000;
	margin:0;
	padding:0;
	}

/* =========== サークル　位置　右寄せ・左寄せ ====== */
#section2{
	padding-top :80px;
	}

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

#section2 .ivorybox{
	width:40%;
	background-color:ivory;
	padding:10px 30px;
	margin-bottom:30px;
	border-bottom-width : 12px;
	border-bottom-style : solid;
	border-bottom-color : #c4a3bf ;
	border-right-width : 10px;
	border-right-style : solid;
	border-right-color : silver;
	}

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

/* サイドバーについての設定 */
.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 : white;
background-color : #000;
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;
}

			/* ここからsection2についてのスマホ対応 */
			@media screen and (max-width: 768px){
body{
font-size: clamp(16px, 1.8vw, 30px);
}

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

/* 会のイメージ（第一印象）  */
			#section1 {
			padding-left : 5%;
			}

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

			#section2 .ivorybox{
			width:80%;
			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;
			}
			/* サイドバーについての設定 */
			.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;
}
}

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


/* スマホ
　　　 @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を記述する
 } */