@import url("breadcrumb.css");
/* 基本 */

#main {

 width: 100%;
 max-width: 1280px;
 margin-left: auto;
 margin-right: auto;
 border-right: 2px ridge;
 height: auto;
 background-color: #FFFFFF;
 flex: 1; 
}

#content-box {

	width: 80%;
	height: auto;
	margin-left: auto;
	margin-right: auto;

}

html { height: 100%;}

body {
 font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
 background-image: url(../img/background-img001.jpg);
 background-size: cover;    
 background-color: #000000;
 /*height: 100%; */
 /* フッターを画面下部に常に表示 */
 display: flex;
 flex-direction: column;
 min-height: 100vh;


}


h1#title {
/*
background: -moz-linear-gradient(top left, #FFDEAD, #FFC778); 
background: -webkit-linear-gradient(top left, #FFDEAD, #FFC778); 
background: linear-gradient(to bottom right, #FFDEAD, #FFC778); 
*/
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  border-right: 2px ridge;
  border-bottom: 2px ridge;
  padding: 1em;
  background-color: rgba(255,255,255,0.5);
  font-size: 125%;
  text-align: center;
}

nav{
text-align: center;
}
nav ul{
margin: 0 ;
padding: 0 ;
}


nav li{
list-style: none;
display: inline-block;
/*width: 20%;*/
min-width: 90px;
font-size:110%;
/*border-bottom:2px solid #F0EBDE;*/
padding: 1em;
}

nav li:not(:last-child){
/*border-right:2px solid #ddd;*/
}

nav a{
text-decoration: none;
position: relative;
display: inline-block;
justify-content: space-around;
align-items: center;
margin: 0 auto;
max-width: 250px;
padding: 10px 25px;
color: #FFF;
transition: 0.3s ease-in-out;
font-weight: 600;
background: #6bb6ff;
border-radius: 8px;
border-bottom: solid 5px #1d7fde;
color: ＃0000FF;
}

nav a:hover{
color:＃0000FF;
border-bottom:2px solid #F7CB4D;
}






h2 {
	font-size: 100%;
	font-weight: bold;
	border-left: 5px solid #4dbf73;
	border-bottom: 1px dashed #e1e1e1;
	padding: 0.25em 0 0.3em 0.5em;
	margin-top:1em;
	margin-bottom:1em;

}


p {
 padding-left:3em;
 margin-bottom: 1em;

}



div.thumbnail-box {

	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

div.thumbnail{


	width:30%;
	height:auto;
	padding:1em
	margin-right:1em;
	margin-bottom:1em;
	background-color:#FFFFFF;
	border:1px solid #87CEFA;
	border-right:3px solid #A9A9A9;
	border-bottom:3px solid #A9A9A9;
	border-radius: 10px;
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;

	/*	
	float:left;
	display: inline-block;
;

	background-color:#FFFFFF;*/
	
	
}

div.thumbnail a {


	text-align:center;
	text-decoration: none;
}



div.artwork{

	width:60%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	overflow: hidden;
	padding:1em;
	background-color:#FFFFFF;
	border-radius: 10px;         
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;
}

div.artwork h3{

	font-weight: bold;
	border-left: 5px solid #4c9ac0;
	border-bottom: 2px dashed #B4B4B4;
	padding: 0.25em 0 0.3em 0.5em;
	margin-bottom:1em;
}



.artwork figure{
  margin: 0;     /* マージンの初期化 */
  display: none; /* 最初に画像を隠しておく */
}

.artwork figure:target{
  display: block;  /* 画像表示 */
  position: fixed; /* 画像を動かさない */
  top: 0;          /* 画面全体に対して画像を中央に設置する */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;    /* 画像を最前列表示 */
}

.artwork img.thumb {
    
  
}




.artwork figcaption {

	margin:1em;
	text-align:center;
	color:grey;
	border:none;


}

.artwork figure {
	text-align:center;

}



.artwork figure:target #overlay{
  position: absolute;        /* 画像が重なるように */
  top: 0;                    /* 4つを0にして画面全体に広げる */
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;     /* フレックスアイテムの並びを縦にする */
  justify-content: center;    /* 左右中央に設置 */
  align-items: center;        /* 上下中央に設置 */
  background: rgba(255, 255, 255, 0.7); /* 画像を見やすくするため透過の黒背景 */
  text-decoration: none;      /* リンクなので文字に下線など装飾が付かないようにする */
  color: #fff;
}

dl {

	padding-left: 4em;

}

dt {

	font-weight: bold;
	border-left: 5px solid #4c9ac0;
	border-bottom: 1px dashed #B4B4B4;
	padding: 0.25em 0 0.3em 0.5em;
	margin-bottom:1em;


}


dd {

	padding-left: 1em;
	padding-bottom: 1em;

}

#page-top:before {
    position: fixed;
    right: 10px;
    bottom: 10px;
    font-size: 1.2rem;
    line-height: 1.2rem;
    background: #fff;
    color:#ffbf70;
    content:"∧";
    padding: 10px;
    border: solid 1px;
    border-radius: 50%;
    box-shadow: 0 2px 10px -6px rgba(0,0,0,.5), 0 3px 10px -4px rgba(0,0,0,.2);
}



footer {

 text-align: center;
 margin-top: auto;
 padding-top: 2em;
 padding-left: 0em;
 padding-bottom: 2em;
 clear: both;
 background-color: #FFFFFF;
}

/*フッターのコピーライト表記の前にテキストを追加*/
footer p:before {
 text-align: center;
 content:"copyright 2025 ";
}



@media screen and (max-width: 768px) {

	nav{
	text-align: center;
	background-color: #ffffff;
	}

	nav a{
	text-decoration: none;
	}

	nav ul{
	margin: 1em;
	padding: 0;
	}

	nav li{
	list-style: none;
	display: inline;
	width: 100%;
	font-size:100%;
	/*border-bottom:1px solid #000000;*/
	padding: 0.5em;

	}

	nav li:not(:last-child){
	/*border-right:2px solid #ddd;*/
	}

	nav a{
	text-decoration: none;
	position: relative;
	display: inline-block;
	justify-content: space-around;
	align-items: center;
	margin: 0 auto;
	max-width: 260px;
	padding: 15px 20px;
	color: #FFF;
	transition: 0.3s ease-in-out;
	font-weight: 650;
	background: #6bb6ff;
	border-radius: 8px;
	border-bottom: solid 5px #1d7fde;
	color: ＃0000FF;
	}


	nav a:hover{
	color:＃0000FF;
	/*border-bottom:2px solid #F7CB4D;*/
	text-decoration: none;
	}


	div.thumbnail{
	width:100%;
	height:auto;
	border:1px solid #87CEFA;
	border-right:3px solid #A9A9A9;
	border-bottom:3px solid #A9A9A9;
	display: inline-block;
	padding:1em;
	margin-right:1em;
	margin-bottom:1em;
	background-color:#FFFFFF;
	border-radius: 10px;
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;
	}

	div.artwork{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	overflow: hidden;
	padding:1em;
	background-color:#FFFFFF;
	border-radius: 10px;         
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;
	}


	h2 {
	font-size: 100%;
	font-weight: bold;
	border-left: 5px solid #4dbf73;
	border-bottom: 1px dashed #e1e1e1;
	padding: 0 0 0.3em 0.5em;
	margin-top:1em;
	margin-bottom:1em;
	}



}