/*
======================
TOPページ　スタイル
======================
*/

/* 背景色 */
main section:nth-of-type(even) {
    background-color: #F6F3ED;
}

/*ーーーーーーーーーーーーーー
メインビジュアル
ーーーーーーーーーーーーーー*/
.mainvisual{
  position: relative;
}
.mainvisual__slider{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.mainvisual__slide{
  height: 100vh;
}
.mainvisual__slide-img{
  object-fit: cover;
  font-family: "object-fit: cover;";
  width: 100%;
  height: 100%;
}
.mainvisual__slide video{
  object-fit: cover;
  font-family: "object-fit: cover;";
  width: 100%;
  height: 100%;
}
.mainvisual__slide video source{
  object-fit: cover;
  font-family: "object-fit: cover;";
  width: 100%;
  height: 100%;
}
.mainvisual__arrow{
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
}
.mainvisual__arrow span,
.mainvisual__arrow i{
  display: block;
}
.mainvisual__logo{
	position: absolute;
	left: 35%;
	top: 30%;
	width: 30%;
	height: auto;
}


.mainvisual__logo img{
	width: 100%;
	height: auto;
}


@media screen and (min-width: 1200px){
	.mainvisual__logo{
		position: absolute;
		left: 45%;
		top: 35%;
		width: 10%;
		height: auto;
	}	
}





/*ーーーーーーーーーーーーーー
ページ内共通パーツ(スマホ)
ーーーーーーーーーーーーーー*/

/*セクション区分*/
.section_inner {
	padding: 6rem 0 6rem;
	width: 90%;
}

.link_button{
	margin: 3rem auto;
	text-align: center;
}
.link_button a{
	color: #000;
	font-weight: bold;
	width: 90%;
	margin: 0 auto;
}
.arrow_r{
	position: relative;
	display: inline-block;
	height: auto;
	margin: 0 auto;
}

/* テキスト */

/*ーーーーーーーーーーーーーー
ページ内共通パーツ(PC)
ーーーーーーーーーーーーーー*/
@media screen and (min-width:1200px) {
	.link_button{
		max-width: 500px;
	}
}


/*ーーーーーーーーーーーーーー
イントロダクション
ーーーーーーーーーーーーーー*/
#intro{}
#intro .intro_img{
	display:flex;
	align-items: center;
	align-content: center;
}

#intro figure{
	width: 50%;
	height: auto;
	margin: 0.5em;
}
#intro .unesco{
	text-align: right;
}
#intro .sekaiisan{
	text-align: left;
}

/*中央揃え文章*/
#intro p{
	text-align: center;
	line-height: 2;
}

figcaption{
	font-size: 70%;
	caption-side: bottom;
	margin: 5px;
}




@media screen and (min-width:1200px) {
	#intro figure{
		margin: 1rem;
	}
}


/*ーーーーーーーーーーーーーー
ガイダンスセンターについて
ーーーーーーーーーーーーーー*/
#about{}

#about .heading_subtitle{
	margin: 0;
}
#about .about_img{
	width: 100%;
	height: auto;
	margin-bottom: 1rem;
}

#about .heading-wrapper{
	grid-area: b;
}

#about .text-wrapper{
	grid-area: c;
	text-align: center;
}


#about .section_inner{
	display:block;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
	grid-template-areas:
	  "b"
      "a"
      "c";
	}
#about .image-wrapper{
	grid-row: auto;
	margin: 0 auto 30px;
	}
.slider-nav{
	margin-top: 10px;
}

@media screen and (min-width: 1200px){
	#about .section_inner{
		display:grid;
		align-items: center;
		grid-template-columns: 50% 50%;
		grid-template-areas:
		 "a b"
		 "a c";
	}
	#about .image-wrapper{
		grid-area: a;
		max-width: 480px;
		height: auto;
		grid-row: 1/3;
	}
}
/*ーーーーーーーーーーーーーー
平泉の文化遺産　構成資産のご紹介
ーーーーーーーーーーーーーー*/
#heritage{}

.world-heritage-wrap{
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}

#heritage .spot{
	display:flex; 
	flex-direction:column; 
	border-radius: 0; 
	overflow:hidden; 
	background:#ddd;
	box-shadow: none;
}

 .spot-grid{ 
	display:grid;
	grid-template-columns: repeat(1fr);
} 

.spot__media{
	position:relative; 
	block-size: clamp(220px, 36vh, 420px);
	background:#ccc top center / cover no-repeat; 
	solation:isolate;
}
.spot__media::before{
	content:""; 
	position:absolute; 
	inset:0; 
	background:rgba(0,0,0,.25); 
	z-index:0; 
	transition: background 1s ease;
}

/*各史跡画像*/
.muryokoin .spot__media{
	background-image:url('heritage/images/bg_muryokoin.jpg');
}
.motsuji .spot__media{
	background:url('heritage/images/bg_motsuji.jpg') center / cover no-repeat; 
}

.chusonji .spot__media{
	background-image:url('heritage/images/bg_chusonji.jpg');
}

.kanjizaioin .spot__media{
	background-image:url('heritage/images/bg_kanjizaioin.jpg');
}

.kinkeisan .spot__media{
	background-image:url('heritage/images/bg_kinkeisan.jpg');
}

#heritage .spot__label{
	position:absolute; 
	bottom:0; 
	left:50%; 
	transform: translateX(-50%);
	writing-mode: vertical-rl; 
	text-orientation: mixed; 
	letter-spacing:.04em;
	background:#fff; 
	color:#111; 
	padding: 18px 8px; 
	font-size: clamp(18px,2.1vw,26px); 
	font-weight: bold;
	box-shadow: 0 8px 18px rgba(0,0,0,.18);
	z-index:2; 
	user-select:none;
	height: 65%; /* 白枠の高さを揃える */
	display:flex; 
	align-items:center; 
	justify-content:center;
	top: 56%;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}


#heritage .spot__foot{
	display:flex;  
	gap: 8px;
	padding: 28px 16px; 
	min-block-size: 160px; /* 帯を太く */
	transition: background .3s ease, filter .3s ease;
	z-index:1;
	align-items: flex-end;
	justify-content: center;
}

.spot__en, .spot__arrow{ 
	position: relative; 
	z-index:1; }


.spot__en{
	font-size: clamp(14px,1.6vw,18px); 
	font-weight:600; 
	opacity:.95;
}
.spot__arrow{ 
	inline-size: 22px; 
	block-size: 22px; 
	flex:0 0 22px; 
	opacity:.75; }


/* 偶数・奇数で色を切替 */
#heritage .spot:nth-child(odd) .spot__foot{ background: #d8c8a8; }
#heritage .spot:nth-child(even) .spot__foot{ background: #cbb998; }


/* ホバー時のシェード効果 */
.spot:has(a:hover) .spot__media::before{ background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.25)); }
.spot:has(a:hover) .spot__foot::after{ background: rgba(0,0,0,.15); }


.spot a{ color:inherit; text-decoration:none; display:block; transition: 1s; }
.spot a:focus-visible{ outline: 3px solid #000; outline-offset: 3px;　transition: 1s;  }


/* ディスプレイ 1200px以上*/
@media (min-width: 1200px){ 
	.spot-grid{
		grid-template-columns: repeat(5, minmax(0,1fr));
		gap: 0;
	}
	.chusonji{order: 3;}
	.motsuji{order: 2;}
	.muryokoin{order:1;}
	.kanjizaioin{order:4;}
	.kinkeisan{order:5;}
}


/*ーーーーーーーーーーーーーー
関連資産のご紹介
ーーーーーーーーーーーーーー*/
section#related_assets{
	background-color: #fff;
}
#related_assets p{
	text-align: center;
}
.related_assets-wrap{
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}

#related_assets .spot__foot{
	text-align: center;
}

#related_assets article{
	margin-bottom: 30px;
}

/*各史跡画像*/
.yanagigosyo .spot__media{
	background-image:url('heritage/images/bg_yanagigosyo.jpg');
}
.shirotoritate .spot__media{
	background:url('heritage/images/bg_shirotoritate.jpg') center / cover no-repeat; 
}

.chojagahara .spot__media{
	background-image:url('heritage/images/bg_chojagahara.jpg');
}

.takkoku .spot__media{
	background-image:url('heritage/images/bg_takkoku.jpg');
}

.honederamura .spot__media{
	background-image:url('heritage/images/bg_honederamura.jpg');
}
@media (min-width: 1200px){ 
	.yanagigosyo{order: 1;}
	.shirotoritate{order: 2;}
	.chojagahara{order:3;}
	.takkoku{order:4;}
	.honederamura{order:5;}
}
/*ーーーーーーーーーーーーーー
イベントのご案内
ーーーーーーーーーーーーーー*/
#event{}

#event ul{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0;
	flex-wrap: wrap;
}
#event li{
	list-style: none;
	width: 100%;
	background-color: #fff;
    margin: 0 1% 5% 1%;
}
#event li + li{
  border-top:none;
}
#event .eventimg_wrap{
	position: relative;
}
#event img{
	width: 100%;
}
#event .tag_sponsor{
	width: auto;
	color: #fff;
	background: #993333;
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 0.8em;
	padding: 1px 10px;
	font-weight: bold;
}

#event .tag_sponsor.whgc {
    background-color: #A28A3D;
}
#event .text_wrap{
	width: 100%;
	height: auto;
	text-align: left;
	padding: 10px;
	
}
#event .event_term{
	font-size: 80%;
}

/* ディスプレイ 550px以上*/
@media (min-width: 550px){ 
	#event li{
		width: 45%;
	}
}

/* ディスプレイ 1200px以上*/
@media (min-width: 1200px){ 
	#event li{
		width: 23%;
    	margin: 0 1% 0% 1%;
	}
}


/*ーーーーーーーーーーーーーー
お知らせ
ーーーーーーーーーーーーーー*/
#news{}

#news .section_inner{
	width: 100%;
	height: auto;
}
#news .news__inner{
	width: 1100px;
	height: auto;
	padding: 20px 30px;
	margin: 30px 50px;
	background-color: #EEEEEE;
	border-radius: 20px;
}

#news .news_wrap{
	width: 80%;
	margin: 0 auto;
	
}
#news .news_wrap dl.news_dl {
    border-top: 1px solid hsla(0, 0%, 0%, 0.20);
    margin-bottom: 2em;
    width: 100%;
}

#news .news_wrap dl a {
    text-decoration: none;
    color: #333;
}

#news .news_wrap dl.news_dl a dt {
    padding-top: 1em;
    font-weight: bold;
}

#news .news_wrap dl.news_dl a dt span.whgc{
	background-color: #A28A3D;
}

#news .news_wrap dl.news_dl a dt span {
    display: inline-block;
    margin-right: 10px;
    color: #fff;
    background-color: #80232c;
    padding: 0.2em 10px;
    font-size: 0.8em;
    text-align: center;
    width: 130px;
}

#news .news_wrap dl.news_dl a dd {
	border-bottom: 1px solid hsla(0, 0%, 0%, 0.20);
    padding-left: 0em;
    padding-top: 0.5em;
	padding-bottom: 1.4em;
	margin: 0;
	line-height: 1.4;
	font-weight: bold;
}

/* ディスプレイ 1200px以上*/
@media screen and (min-width: 1200px) {
	#news .news_wrap dl.news_dl a dd {
		padding-left: 17em;
   		padding-top: 0;
		margin-top: -1.6em;
	}

}


/*ーーーーーーーーーーーーーー
平泉ってどんな所!?
ーーーーーーーーーーーーーー*/
#study{
	background-color:  #fff;
}
#study .section_inner{
	position: relative;
	width: 90%;
	height: auto;
	background-color: #EEEEEE;
	border-radius: 20px;
	padding: 50px 20px 20px;
	margin: 60px auto;
	text-align: center;
	line-height: 2;
}
/*
#study h3{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	letter-spacing: 0.01em;
	font-weight: normal;
	margin-top: 30px;
}
#study .text--center{
	position: relative;
	z-index: 100;
}
*/
#study .heading_subtitle{
	margin: 0;
}
#study .link_button{
	position: relative;
	z-index: 110;
	margin: 0 auto 170px;
}
#study a{
	display: inline-block;
	color: #000;
	font-weight: bold;
}
#study .kerohira_r{
	position: absolute;
	right: 0px;
	bottom: 10px;
	width: 30%;
	z-index: 10;
}
#study .kerohira_l{
	position: absolute;
	left: 15px;
	bottom: 10px;
	width: 30%;
	z-index: 15;
}

/* ディスプレイ 550px以上*/
@media screen and (min-width: 550px){
	#study .link_button{
		margin: 0 auto 30px;
	}
	#study .kerohira_r{
		position: absolute;
		right: 0px;
		bottom: 10px;
		width: 15%;
	}
	#study .kerohira_l{
		position: absolute;
		right: 0px;
		bottom: 10px;
		width: 15%;
	}
}

/*ーーーーーーーーーーーーーー
交通のご案内
ーーーーーーーーーーーーーー*/
#access{
	background-color:  #F6F3ED;
}
#access .section_inner{
	width: 100%;
}
#access iframe{
	width: 100vw;
}
/* 経路図 */
.access_duration{
	width: 90%;
	height: auto;
	margin: 2rem auto;
}
#access .plane{
	width: 90%;
	height: auto;
	margin: 0 auto;
	background-color: #A28A3D;
	border-radius: 5px;
	text-align: center;
}
#access .plane p{
	font-weight: bold;
	font-size: 20px;
	letter-spacing: 0.04em;
	padding: 20px;
	position: relative;
	z-index: 100;
}
.plane img{
	width: 25%;
	position: absolute;
	top: 0;
	left: 150px;
	z-index: -10;
}
#access ul{
	margin: 0;
	padding: 0;
}
#access .duration li{
	background-color: #CCCCCC;
	border-radius: 5px;
	margin: 10px auto;
	width: 90%;
	height: 30px;
	text-align: left;
	list-style: none;
}
#access p{
	padding-left: 5px;
	padding-right: 5px;
}
#access p span{
	float: right;
}

/* 周辺案内用マップ */
#access .areamap_wrap{
	width: 100%;
	text-align: center;
	margin: 30px auto;
}
#access .access_img{
	width: 80%;
	height: auto;
}
#access .sub_button{
	background-color: #ccc;
	font-weight: normal;
	position: relative;
	display: inline-block;
	padding-left: 20px;
}
#access p{
	margin: 0;
}

/* ディスプレイ 550px以上*/
@media screen and (min-width: 550px){
	#access iframe{
		margin: 0 calc(50% - 50vw);
	}
	/* 経路図 */
	.access_duration{
		width: 100%;
		height: auto;
		margin: 2rem auto;
		display: flex;
	}
	#access .plane{
		width: auto;
		height: auto;
		display: table;
	}
	#access .plane p{
		padding: auto 1rem;
		margin: auto 0;
		display: table-cell;
		vertical-align: middle;
      	text-align: center;
		line-height: 1.2;
	}
	#access .plane img{
		width: 70%;
		top: 20%;
		left: 15%;
	}
	#access .duration{
		width: 30%;
		height: auto;
		margin: 0 1rem;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	#access .duration li{
		margin: 0.5rem auto;
		width: 100%;
		height: 30px;
		
	}
	#access p span{
		float: right;
	}
}

/*ーーーーーーーーーーーーーー
関連リンク集
ーーーーーーーーーーーーーー*/
#link_collection{
	background-color:  #fff;
}
.link_wrap{
	width: 100%;
	height: auto;
	display: flex;
	flex-flow: row wrap;
}
#link_collection a{
	display: inline-block;
	width: 50%;
	height: auto;
}
#link_collection img{
}
#link_collection figcaption{
	width: 100%;
	height: auto;
	margin: 0px;
	caption-side: bottom;
	text-align: center;
	font-size: 70%;
}

/* ディスプレイ 550px以上*/
@media screen and (min-width: 550px){
	.link_wrap{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	#link_collection a{
		width: 80%;
	}
	#link_collection figcaption{
		width: 90%;
		font-size: 80%;
	}
}