/* PC用のスタイル（基本） */
.container { width: 1000px; 
 display: flex;
 flex-direction: row; /* デフォルトは横並び */

}

/* スマホ用のスタイル（横幅768px以下の場合） */
@media (max-width: 768px) {
  .container {
    width: 100%; /* 横幅を画面いっぱいに広げる */
    padding: 10px; /* 左右に少し余白を作る */
    flex-direction: column; /* ここで「縦並び」に上書き！ */
  }
}



img {
  max-width: 100%;
  height: auto;
}

.center-text {
  text-align: center;
}

.page-literature h4 {
	position: relative;
	padding-left: 20px;
	text-decoration: none;
	border-bottom: none;
}

.page-literature h4::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 0.84em;
	width: 8px;
	height: 8px;
	background: #000;
	transform: translateY(-50%) rotate(45deg);
}

.page-literature li {
  margin-bottom: 8px;
  font-weight: normal;
}

.page-literature a[href^="#"] {
  text-decoration: underline;
}



a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  background-image: url("external-link.svg");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}



sup {
  font-size: 0.8em;
}

.footnotes {
  font-size: 0.9em;
  color: #555;
  font-weight: normal;
}



.site-footer {
  margin-top: 50px;
  padding: 20px;
  text-align: center;
  background-color: #f7e6c4;
}

.gallery {
  display: flex;
  flex-direction: column;
  gap: 50px; /* ← 縦の余白 */
  margin: 0 auto;    
}

.gallery img {
   max-width: 550px;
  display: block;
  margin: 0 auto;     /* ← 画像だけ中央 */
  margin-bottom: 50px;
}

.gallery figcaption {
  text-align: left;
  color: #555;
  margin-top: 5px;
  margin-bottom: 20px;
}


.squote {
  font-style: italic;       /* 斜体 */
  font-weight: bold;        /* 太字 */
  background-color: #e0f7ff; /* 薄い水色 */
  padding: 10px;
}

.quote {
  font-style: italic;       /* 斜体 */
  font-weight: normal;
  padding: 10px;
  text-indent: 0em;
  margin-left: 1em; 
}



.squote .author {
  display: block;
  text-align: right; /* 右寄せ */
}


.image-row {
  display: flex;
  gap: 15px;
  justify-content: center;
}

body{
	color:black;
	background-color:white;
	padding: 0%;
	line-height: 100%;
}

body a {
	/*text-decoration:none;*/
	color: #333333;
	/* font-weight: bold; */
}

body a:hover {
	background-color:burlywood;	/*リンクにマウスが乗ったら色を変える*/
}

body a:active {
	color:white;
}

/* 訪問済み */
body a:visited {
  color: purple;
}

div#pagebody {
	width: 1000px;
	margin: 0 auto;
	text-align: left;

}

h1{
	font-family:sans-serif;
	background-color:skyblue;
	color: black;
	border-style:solid;
	border-width:0px;
	border-color:#000000;
	padding:0.8em 64px;
	line-height:150%;
}

h1 a {
	text-decoration:none;
}
h1 a:link { color: black; }
h1 a:visited { color: black; }
h1 a:hover { color: black; }
h1 a:active { color: white; }


h2{
	font-family:sans-serif;
	border-style:solid;
	border-width:0px;
	background-color:skyblue;
	color: black;
	padding:0.4em 64px;
	line-height:150%;

}

h3{
	font-family:sans-serif;
	border-bottom-style:dotted;
	border-width:1px;
	line-height:150%;
}


h3 a {
	text-decoration:none;
}
h3 a:link { color: darkorange; }
h3 a:visited { color: darkorange; }
h3 a:hover { color: darkorange; }
h3 a:active { color: white; }




h4{
	font-family:sans-serif;
	border-bottom:none;
	border-width:1px;
	line-height:150%;
}

h5{
	font-family:sans-serif;
	border-style:solid;
	border-width:0px;
	color: black;
	line-height:120%;
}


p{
	text-indent:1em;
	line-height:150%;
}

li {
	line-height:150%;
}

.todo { 
	color:red;
}
.red {
	color: #F00;
}

.img-border {
  border: 1.3px solid black; /* 太さ・線種・色 */
}

.highlight {
  color: black;
  font-weight: bold;
}



/*右のカラム*/

div#main {
	width:650px; margin-right:5px; padding-top:10px;
	float:left;
	margin:20px 10px 15px 15px;	/*位置調整（IE6のバグに注意）*/
}





/*左のカラム*/

div#menu {
	width:200px;			/*幅の指定*/
	margin:20px 10px 10px 25px;	/*位置調整（IE6のバグに注意）*/
	display:inline;			/*IE6のマージン算出のバグ対策*/
	float:left;			/*メニューのカラムを左寄せにする*/
}

div#menu a {
	font-weight: normal;  /* 太字を解除 */
}


/*メニューのボディ部分（余白調整・背景画像・背景色）*/
ul#menu {
	padding-top: 6px;
	padding-bottom:6px;
	/*background-image:url("");*/
	background-repeat:no-repeat; background-position:bottom;
	background-color:skyblue;
}
ul#menu li {
	font-size:90%;			/*文字サイズを90%にする*/
	list-style-type:square;		/*リストマーカーを四角にする*/
	display:inline;			/*リスト項目をインライン表示にする*/
	line-height: 100%;

}
ul#menu li a {
	display:block;			/*リンクをブロック表示にする*/
	margin:0px 4px 0px 4px;		/*メニュー項目のマージン*/
	padding:2px 2px 2px 20px;	/*メニュー項目のパディング*/
	background-color:white;	/*メニュー項目の背景色*/
	text-decoration:none;		/*リンクの下線を無くす*/
	color: black;
	

}
ul#menu li a:hover {
	background-color:burlywood;	/*リンクにマウスが乗ったら色を変える*/
}


ul#menu li a:active {
	color: white;
}