/****************************************************************
    wa_each_artstyle.php
****************************************************************/

body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
  }

.art_style_conf {
    width: 80%;
    margin: 200px auto;
	align-items: center;
	justify-content: center;
	position: relative;
	text-align: center;
	padding: 0 30px;
	overflow-x: auto;
  }

  .chart_conf {
		  justify-content: center; /* 左右中央に配置 */
		  margin: 80px auto; /* 左右中央に寄せる */
	  }

	  .main_artists {
		  width: 90%;
		  padding: 30px;
		  justify-content: center; /* 左右中央に配置 */
		  margin: 80px; /* 左右中央に寄せる */
	  }
	  
	  .wrapper {
		  display: flex;
		  width: 85%;
		  max-height: auto;
		  min-width: 900px;
		  justify-content: space-between;
		  margin: 60px auto; /* 左右中央に寄せる */
		  margin-top: 80px;
	  }

	  .image_conf {
		  display: flex;
		  width: 40%;
		  margin: 0 20px;
		  justify-content: center;
	  }
	  .image_conf img {
		  max-width: 400px;
		  max-height: 500px;
	  }

	  .right_text {
		text-align: left;
		  display: flex;
		  width: 60%;
		  margin: 0;
		  flex-direction: column;
	  } 
	  .overview {
		margin: 0 0 0 40px;
	}

	.detail {
		margin: 30px 0 0 40px;
	}
	.title_main_artists {
		text-align: center; /* テキストを中央揃え */
		padding: 10px;
		width: 40%; /* テキストの幅を画像の幅に合わせる */
		color: #000000;
		font-size: 18px;
		margin: 100px auto;
		border-bottom: 4px solid #000000;
	}
	
@media only screen and (max-width: 1001px) {
	.art_style_conf {
		width: 85%;
		align-items: center;
		justify-content: center;
		margin: 50px auto;
		position: relative;
		text-align: center;
		padding: 0;
		overflow-x: auto;
	  }

	  .wrapper {
		width: 85%;
		display: block;
		min-width: inherit;
		justify-content: center; /* 左右中央に配置 */
		margin: auto; /* 左右中央に寄せる */
		flex-direction: column;
		align-items: center;
		max-height: initial;
	}
	.image_conf {
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	.image_conf img {
		margin: 0 auto;
        width: 70%;
		max-width: initial;
		max-height: initial;
	}

	.right_text {
	  text-align: left;
		display: flex;
		width: 100%;
		margin: 0;
		flex-direction: column;
	} 
	.overview {
		margin: 30px auto;
	}
	.detail {
		margin: 30px auto;
	}
	.main_artists {
		width: 90%;
		display: block;
		min-width: inherit;
		justify-content: center; /* 左右中央に配置 */
		margin: auto; /* 左右中央に寄せる */
		flex-direction: column;
		align-items: center;
		max-height: initial;
	}
	.title_main_artists {
		text-align: center; /* テキストを中央揃え */
		padding: 10px;
		width: 50%; /* テキストの幅を画像の幅に合わせる */
		color: #000000;
		font-size: 18px;
		margin: 100px auto;
		border-bottom: 4px solid #000000;
	}
}





.container_base, .container_base2 {
  display: grid;
  max-width: 70vw;
  margin: 0 auto;
  box-sizing: border-box; /* ボックスモデルのボーダーボックスを使用 */
  margin-top: 100px;
}
.container_base {
  grid-template-columns: repeat(82, 1fr); /* 10列、各列の幅は等分 */
}
.container_base2 {
  grid-template-columns: repeat(320, 1fr); /* 10列、各列の幅は等分 */
}

.item_base, .item_base2 {
  box-sizing: border-box; /* ボックスモデルのボーダーボックスを使用 */
  min-width: 1%;
}
.item_base:first-child {
width: 200px; /* 例として200pxに指定 */
}
.item_base2:first-child {
width: 320px; /* 例として200pxに指定 */
}

.item_a0, .item_a, .item_a2 {
height: 30px;
padding-bottom: 10px;
margin-bottom: 5px;
}
.item_a0 {
padding: 5px 20px 5px 0px;
text-align: center;
}
.item_a {
z-index: 2;
overflow: visible; /* はみ出た内容を表示 */
white-space: nowrap; /* テキストが改行されないように */
font-size: 12px;
border-left: 1px solid #000000;
padding: 5px;

}
.item_a2 {
padding: 5px;
}

.item_a1, .item_a1_0 {
height: 2.5px;
border-bottom: 2.5px solid #000000;
margin-bottom: 10px;
}
.item_a1_0 {
margin-right: 20px;
}

.item_b0, .item_b, .item_b100 {
height: 40px;
padding: 5px;
margin: 0px 0px;
text-align: center;
}
.item_b0 {
margin-right: 20px;
}
.item_b {
padding: 5px 0px;
}
.item_b100 {
padding: 5px 0px;
border-left: 1px solid #000000;
}

.item_c, .item_c1 {
height: 20px;
text-align: center;
}
.item_c1 {
background-color: #6a6a6a;
}

button {
	background-color: #000000;
}
button a {
	color: #ffffff;
	font-size: 12px;
	padding: 2px;
}
.link_artstyle {
  margin: 20px;
  width: 90%;
  text-align: right;

}

.artists_data {
	text-align: center;
	margin-top: 10px;
  }

.artists_data_b {
	  text-decoration: none;
  }

.works_data {
	text-align: center;
	margin-top: 10px;
}

a.works_data_b {
	text-decoration: none;
	color: darkslategray!important;
}


/****************************************************************
    wa_timeline_artist.php
	wa_timeline_sytle.php
	all_exhibition_chart.php
*********************************************f*******************/

	.wa_world {
		width: 80%;
		align-items: center;
		justify-content: center;
		margin: 200px auto 250px;
		position: relative;
	  }
	  .wa_world::before {
		content: "";
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: url('/common/img/Wiki/Michelangelo Buonarroti/pieta.jpg');
		background-size: cover;
		filter: grayscale(50%);
		opacity: 0.15;
		z-index: -1;
		transition: opacity 0.5s ease;
	  }
	  .timeline {
		display: flex;
		width: 100%;
		margin: 80px auto;
		transition: opacity 0.5s ease; /* 画像切り替えのアニメーションを追加 */
		position: relative;
		overflow: hidden; /* 見切れた画像を非表示にするために overflow を追加 */
	  }
  
	  .timeline::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-size: cover;
		background-position: center;
		opacity: 0.3;
		z-index: -1;
	  }
	.artist_list {
		width:80%;
		  align-items: center;
		  justify-content: center;
		  margin: 200px auto;
		  position: relative;
		}

	.artist_detail {
		margin-top: 60px;
	}

	.flx-nav-header {
		visibility: hidden;
		opacity: 0;
		transition: opacity 2s ease; /* トランジションを追加 */
	}
	
	/* スクロールダウン時に表示 */
	.flx-nav-header.show {
		visibility: visible;
		opacity: 1;
	}
	  
a.selected-multiple {background-color: #042f4b;color: #ffffff;}

.title_space {
	margin-top: 10px;
}

.artist_image_div {
	display: flex;
	box-sizing: border-box;
	margin: 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 300px;
}

.no_artist_image_div {
display: flex;
box-sizing: border-box;
border: 1px solid #bbbbbb;
border-radius: 0px;
margin: 0 auto;
align-content: center;
justify-content: center;
min-height: 300px;
}

.no_artist_image {
width: 60%;
height: auto;
}
 
.container_artist {
    display: grid;
    width: 85%;
    max-height: 500px;
    grid-template-columns: 1fr 1fr;
    gap: 50px 50px;
    justify-content: center; /* 左右中央に配置 */
    margin: 30px auto; /* 左右中央に寄せる */
}
@media only screen and (max-width: 1001px) {
	.artist_list {
		width: 90%;
		padding: 0;
		margin: 50px auto;
	}
	.artist_detail {
		display: block;
		justify-content: center; /* 左右中央に配置 */
		margin: auto; /* 左右中央に寄せる */
		align-items: center;
	  }
	  .container_artist {
		display: block;
		justify-content: center; /* 左右中央に配置 */
		margin: auto; /* 左右中央に寄せる */
		flex-direction: column;
		align-items: center;
		max-height: initial;
	  }
      .each_img {
		margin-top: 30px;
        width: 100%;
        }  
      .each_info {
		margin-top: 30px;
        width: 100%;
        }
		.container_artist_2 {
			display: block;
			justify-content: center; /* 左右中央に配置 */
			margin: auto; /* 左右中央に寄せる */
			flex-direction: column;
			align-items: center;
		  }

	.wa_world {
		margin: 50px auto 250px;
	  }

  }


.container_artist_2 {
    display: block;
    width: 85%;
    margin: 80px auto;
 }
 .description_title {
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    margin-bottom:10px;
 }
 .description_text {
    text-align: left;
    text-indent: 1rem;
    margin-bottom: 10px;
 }
 .description_ref {
    font-size: 14px;
    text-align: right;
    padding: 10px;
 }