@charset "UTF-8";

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

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

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

h3{
font-size : large;
line-height :1;
margin:0;
padding:2%;
}

.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;
line-height :30px;
color: #fff;
}
.topnav li a{
text-decoration: none;
color:white;
}

header{
background-color : #666;
width : 100%; 
background-image:url(2sazankajpf.jpg);
}

/*  基本、パソコン対応  */
.container {
    width: 100%;
}

ul .album{
width:100%;
text-align : center;
margin:0;
padding:0;
display: flex; /* Flexboxコンテナとして設定 */
flex-direction:row;
}

.thumbnail-container {
margin :0% 0%;
text-decoration: none;
justify-content : space-around;
padding:1% 3%;
margin-bottom:0;
line-height :30px;
color: #fff;
}

/*  [写真のコード]貼り付け  */

.thumbnail-container {
  overflow: hidden; /* 拡大時に画像が枠からはみ出るのを防ぐ */
  display: inline-block;
}

.zoom-image {
  /* 初期状態：サムネイルとして縮小（70%） */
  transform: scale(0.2);
  /* アニメーションの速度（0.3秒） */
  transition: transform 0.3s ease-in-out;
}

.zoom-image:hover {
  /* ホバー時：元の大きさ（100%）に戻る */
  transform: scale(1);
}


/*  */
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 h3{
			margin:0;
			padding:0;
			}
			#section1 h4{
			margin:0;
			padding:0;
			}

			#section1 p{
			padding-left:2%;
			}


			/* ここからsection2に付いてのスマホ対応 */

/* =========== サークル　位置　右寄せ・左寄せ ====== */
			#section2 .circle{
			display: block;
		        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;
			}


			/* サイドバーについての設定 */
			.sidebar-toc {
			width:100%;
			margin:0;
			padding:0;
			}


			/* セクション３についての設定 */
			#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を記述する
 } */