@charset "utf-8";
/* exhibitionと共通 */
.titarea{
	background-image: url(../images/bg_tit.webp);
	background-repeat: no-repeat;
	}
.titarea h1{
width:100%;
font-family: "Noto Serif JP", serif;
font-size: 2rem;
padding-left: 1rem;
line-height: 1.2;
}
.titarea p{
width:100%;
padding: 1rem;
display: flex;
justify-content: flex-end;
}
.titarea p img{
display: block;
height: 3rem;
width: auto;
}
.listarea{
width: 90%;
margin: 0 auto;
}
/*ここから関連アーカイブス*/
/*検索領域-exfirst-age */
.exfirst-age{
width: 90%;
margin: 4rem auto 2rem;
}

/* --- プルダウンメニューのスタイル --- */
.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1rem; 
    padding: 0.75rem 2.5rem 0.75rem 0.9375rem; 
    margin-right: 0.625rem; 
    min-width: 12.5rem; 
    border: 0.125rem solid #e7e1cd; 
    border-radius: 0.5rem; 
    background-color: #fff;
    cursor: pointer;
    color: #5a524c;

    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%235c554c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m2 5 6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center; 
    background-size: 1rem; 
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* フォーカスが当たった時のスタイル */
.custom-select:focus {
    outline: none;
    border-color: #d2c8b6;
    box-shadow: 0 0 0.3125rem rgba(210, 200, 182, 0.7); 
}

/* --- 検索ボタンのスタイル --- */
.formbtn {
    font-size: 1rem; 
    font-weight: bold;
    color: #5c554c;
    background-color: #d2c8b6;
    border: none;
    padding: 0.75rem 1.5625rem; 
    border-radius: 0.5rem; 
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

/* カーソルが乗った時のスタイル */
.formbtn:hover {
    background-color: #c5b9a8;
}

/* クリックした瞬間のスタイル */
.formbtn:active {
    background-color: #b8a999;
    transform: scale(0.98);
}
/*↑ここまで*/
.listarea_age time{
/*border: #DCDCDC solid 1px;*/
/*padding: 1rem;*/
text-align: left;
display: block;
margin: 2rem 0 0 ;
color: #d2c8b6;
font-size: 2rem;
}
.related_content{
margin-bottom: 4rem;
}
.related_content h2{
font-size: 2rem;
font-weight: 400;
line-height: 1.2;
margin-bottom: 1rem;
}
.related_content h2::before{
content: ''; 
display: inline-block; 
width: 1rem; 
height: 1.8rem;
background-color: #f2f2f2; 
border: 1px solid #c1c1c1;
margin-right: 12px; 
vertical-align: middle; 
line-height: 1.2;
}
.related_content dl{
font-size: 1rem;
font-weight: 400;
color: #aaaaaa;
display: flex;
}
.related_content dt{
display: block;
width: auto;
padding-right: 1rem;
white-space: nowrap;
}
.listarea_age .related_content p{
margin-bottom: 2rem;
}
.related_content p:not(:first-child)::before {
  content: "■";
  margin-right: 5px;
  color: #d2c8b6;
}
.related_content p:not(:first-child)::first-line {
  font-weight: bold;
}
.related_content p {
  /* 長いURLや英単語を強制的に折り返す設定 */
  overflow-wrap: break-word;
  word-break: break-all;
}
.related_content p a:link {
    color: #8ACBCF;
}
.related_content p a:visited {
    color: #8ACBCF;
}
/* 上にもどるボタン */
.backtotop{
text-align: center;
}
.backtotop a{
display: inline-block;
font-size: 1rem;
  color: #5c554c;
    background-color: #d2c8b6;
    border: none;
    padding: 0.75rem 1.5625rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
/* ここからパソコン用画面の設定
------------------------------------------------------------*/
@media screen and (min-width:756px){
.titarea{
	display: flex;
	align-items: flex-end;
	background-image: url(../images/bg_tit.webp);
	background-repeat: no-repeat;
	}
.titarea h1{
width:70%;
font-family: "Noto Serif JP", serif;
font-size: 2rem;
padding-left: 1rem;
margin-bottom: 1rem;
margin-left: 10%;
}
.titarea p{
width:20%;
height: 150px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 1rem;
margin-right: 10%
}
.titarea p img{
display: block;
height: 3rem;
width: auto;
}
.exfirst-age{
width: 60%;
margin: 4rem auto 2rem;
}
.listarea{
width: 60%;
margin: 0 auto;
}
}