/** common **/

*{ box-sizing: border-box; }

.cf:after {
  content: ".";
  clear: both;
  visibility: hidden;
  display: block;
  height: 0;
}


div#borderline div#naviline {
  height: 10px;
}

div#ibcNavigation div#navigationMenu ul li#tv a#tvprogram,
div#ibcNavigation div#navigationMenu ul li#radio a#radioprogram{
  font-size: 12px;
}

div#container{
	background: none;
	font-size: 18px;
	line-height: 1.8;
	color: #fff;
}



.b{ font-weight:bold; }
.red{ color:red; }
.blue{ color:#2791d8; }
.small{ font-size:14px; color:#000; }
.u{ text-decoration: underline; }
.line{ text-decoration: line-through; }
.left{ text-align:left; }
.center{ text-align:center; }
.right{ text-align:right }

.p50 { padding: 50px; }


/*/// ▼ アニメーション ▼ ///*/

/* 上から下へフワッと表示 */

.fadeInDown {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
}
@-webkit-keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}

/* 下から上へフワッと表示 */

.fadeInUp {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
}
@-webkit-keyframes fadeInUp {
	0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInUp {
	0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	visibility: visible !important;
}

/* 右から左へフワッと表示 */

.fadeInRight {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
}
@-webkit-keyframes fadeInRight {
	0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInRight {
	0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
.fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
	visibility: visible !important;
}

/* ぼかしてフワッと表示 */

.fadeInBlur {
  -webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:.5s;
	-ms-animation-duration:.5s;
	animation-duration:.5s;
}

@-webkit-keyframes fadeInBlur {
	0% { opacity: 0; -ms-filter: blur(50px); filter: blur(50px); }
	100% { opacity: 1; -ms-filter: blur(0px); filter: blur(0px); }
}

@keyframes fadeInBlur {
	0% { opacity: 0; -ms-filter: blur(50px); filter: blur(50px); }
	100% { opacity: 1; -ms-filter: blur(0px); filter: blur(0px); }
}

.fadeInBlur {
	-webkit-animation-name: fadeInBlur;
	animation-name: fadeInBlur;
	visibility: visible !important;
}


/*/// ヘッダー ///*/

header {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
  background-image: url("images/bg_map_hiraizumi.svg");
  background-position: center;
  background-size: 1000px;
  background-color: rgba(0,0,0,0.4);
  background-repeat: no-repeat;
  width: 100%;
  height: calc( 100vh - 80px );
  padding: 50px 0;
  box-sizing: border-box;
}

.header h1 {
  display: block !important;
  margin: 0 auto 40px;
}

.header h1 img {
  display: block !important;
  margin: auto;
}

.header h2 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 16px;
  text-align: center;
}

.header h2 span {
  display: block;
  margin: 0.2em auto;
  font-size: 20px;
}

.header p {
  margin: 0.8em 0;
  line-height: 1.2;
}

.header p span {
  font-size: 16px;
}


/*/// ▼ マップエリア ▼ ///*/

.map_area {
  background-color: rgba(0,0,0,0.5);
  padding: 60px 0 160px;
}

.attention {
  width: 800px;
  padding: 1em;
  text-align: center;
  margin: 0 auto 48px;
  border: 1px solid #fff;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.4;
}

h2.map img {
  display: block;
  margin: 60px auto 0;
}

.course_map {
  position: relative;
  background-image: url("images/map.png");
  background-position: center;
  background-repeat: no-repeat;
  height: 1400px;
  width: 1000px;
  margin: 0 auto;
}

.point_list {
  list-style-type: none !important;
}

.course_map .point_list li {
  position: absolute;
}

.tsukimizaka {
  top: 300px;
  left: 406px;
  z-index: 5;
}

.chusonji {
  top: 78px;
  left: 234px;
}

.konjikido {
  top: 205px;
  left: 0;
}

.kanzantei {
  top:464px;
  left: 0px;
}

.motsuji {
  bottom: 469px;
  left: 174px;
}

.motsujidori_vr {
  bottom: 176px;
  left: 164px;
  z-index: 1;
}

.motsujidori_time {
  bottom: -90px;
  left: 164px;
}

.kanjizaioin {
  bottom: 51px;
  left: 402px;
}

.muryokoin_vr {
  bottom: 178px;
  right: 88px;
  z-index: 1;
}

.muryokoin_time {
  bottom: -90px;
  right: 88px;
}

.takadachigikeido {
  top: 192px;
  right: 76px;
}

.yanaginogosyo_vr {
  top: 448px;
  right: 0px;
  z-index: 5;
}

.yanaginogosyo_time {
  top:675px;
  right: 0px;
  z-index: 1;
}


.view {
  width: 900px;
  margin: 30px auto;
}

.view img {
  margin-right: 20px;
  width: 350px;
  height: auto;
  display: inline-block;
  vertical-align: top;
}

.view p {
  width: 520px;
  display: inline-block;
  vertical-align: top;
}

/*/// ▼タイムスコープ▼ ///*/

.time_area {
  width: 1000px;
  box-sizing: border-box;
  padding: 50px;
  margin: 60px auto;
  background: rgba(255,255,255,0.7);
  color: #222;
  display: flex;justify-content: space-between;
  align-items: center;
}

.time_area div {
  flex-shrink: 3;
}

.time_area img {
  display: block;
  margin: 0 16px 0 0;
}

.time_area h3 {
  color: #222;
  font-size: 18px;
  margin: 0 0 16px;
  text-align: center;
}

.time_area h4 {
  color: #222;
  font-size: 16px;
  text-align: center;
  margin: 16px 0;
}
 
.time_area p {
  color: #222;
  font-size: 15px;
  line-height: 1.5;
  margin: 0.8em 0;
}

.time_area a {
  text-decoration: none;
  color: #be8c17;
}

.time_area a:hover {
  text-decoration: underline;
}


/* 協賛 */

.kyousan {
  background-color: rgba(0,0,0,0.7);
  padding: 30px 0;
  margin: 0;
}

.kyousan h4 {
  font-size: 16px;
  text-align: center;
  color: #fff;
  margin-bottom: 1em;
}

.kyousan ul {
  width: 960px;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.kyousan ul li {
  font-size: 15px;
  color: #fff;
  margin: 0 0.5em ;
}

/*/// ▼ footer ▼ ///*/

.teikyou {
  margin: 0.8em 0;
  color: #fff;
}

div#footerarea{
	background-color: #191C20;
	box-shadow: none;
	color: #fff;
	text-align: center;
}

footer{
	padding: .5em 0;
	font-size: 14px;
}


/*/// ▼ ページトップボタン ▼ ///*/

#page_top{
  z-index: 100;
  width: 50px;
  height: 50px;
  position: fixed;
  right: 30px;
  bottom: 60px;
  background:#fff;
  opacity: 0.8;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-weight: normal;
  content: '';
  font-size: 12px;
  line-height: 25px;
  color: #fff;
  position: absolute;
  width: 15px;
  height: 15px;
  top: 0;
  bottom: 1px;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  background-image: url("images/top.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}