@charset "UTF-8";
/* =================================
フロントページ
===================================*/
.flex-container {
	display:flex;
	flex-wrap:wrap;
}

.flex-nowrap {
	flex-wrap:nowrap;
}

.left-block {
	flex-basis:45%;
	margin:0 2%;
}

.right-block {
	flex-basis:45%;
	margin:0 2%;
}



/* ------------ 営業時間のご案内 ------------- */


.information {
	border:1px solid #0082d9;
	border-radius:6px;
	margin:0 2% 40px;
	color:#000;
}

.information .info-header.flex-container {
	font-weight:bold;
	justify-content: space-between;
	padding:10px;
	background-color:#0082d9;
	color:#fff;
	border-radius:5px 5px 0 0;
	margin-bottom:20px;
}

.information h2 {
	font-size:1rem;
	line-height:1;
	margin:0;
}

.information h3 {
	margin:0 0 6px 0;
	font-size:1.2rem;
	color:#0082d9;
}

.information h4 {
	margin:0 0 10px 0;
	font-size:1.2rem;
}

.information .flex-container {
	justify-content:center;
	gap:10px;
}

.information .left-block{
	flex-basis:35%;
	text-align:center;
	justify-content:space-around;
}

.information .right-block{
	flex-basis:50%;
}

.information .status .flex-container {
	justify-content:left;
}

.information .flex-container.status-header {
	justify-content:space-between;
}

.information .status > .flex-container.lift-box,
.information .status > .flex-container.monorail-box {
	flex-wrap:nowrap;
	margin:10px auto;
}

.information .icon-info {
	font-size:0.9em;
	margin: 0 10px;
}

.term {
	padding:0 15px;
	font-size:0.85em;
	border-radius:10px;
	display:block;
	background-color:#fff;
	color:#0082d9;
}

.info-time {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}


.ticket-hour {
	font-size:1.2rem;
}

.business-hour {
	font-size:1.2rem;
}

.info-time .ride-hour {
	flex-basis:60%;
	padding:10px;
}

.info-time .ride-hour dl {
	display:flex;
	flex-wrap:wrap;
}

.info-time .ride-hour dl dt,
.info-time .ride-hour dl dd {
	flex-basis:50%;
}

.information .notice {
	font-weight:bold;
	color:#c00;
	text-align:center;
	font-size:14px;
	margin:10px auto;
	flex-basis:100%;
}

.information a.arrow02 {
	display:flex;
	align-items:center;
	text-align:center;
	font-size:13px;
	background-image:url(../images/img_arrow02.png);
	background-repeat:no-repeat;
	background-position:0 50%;
	padding-left:10px;
	margin-right:10px;
}


.last-ride-label {
	font-size:14px;
	border:1px solid #000;
	padding:2px 5px;
}

.responsive-icon {
  width: 100%;
  max-width: 60px;
  height: auto;
}

/* 新着情報・ライブカメラ・SNSアイコン　並び順調整 */
.grid {
  display: grid;
  grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
  gap: 10px;
margin:20px;
}

/* レイアウト位置指定 */
.news {
  grid-column: 1;
  grid-row: 1 / span 3;
  height: 100%;
}

.livecam {
  grid-column: 2;
  grid-row: 1;
}

.sns {
  grid-column: 2;
  grid-row: 2;
}

.youtube {
  grid-column: 2;
  grid-row: 3;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  font-weight: bold;
}


/* ------------ 新着情報 ------------- */
.news li {
	border-bottom:1px dotted #ccc;
	padding-top:10px;
	padding-bottom:5px;
	list-style:none;
}

.news li .date {
	font-size:12px;
	font-weight:bold;
}

.news-archives {
	font-size:12px;
	text-align:right;
	margin-bottom:1em;
}

.new {
	font-size:12px;
	color:#f00;
}



/* ------------ ライブカメラ ------------ */
.livecam {
	border: 10px solid #c2e3ff;
	background-color: #fff;
	justify-content: space-between;
	margin-bottom:2em;
}

.livecam-img {
	flex-basis:220px;
	margin:1em;
}

.livecam-link {
	margin:1em;
	flex-grow:2;
}

.livecam h2 {
	font-size:1rem;
	background-color: #0071bc;
	font-weight: bold;
	color: #fff;
	padding:3px 10px;
	margin-top:0;
	text-align:center;
}

.livecam li {
	list-style:none;
	margin-bottom:0.25em;
}

.weather-link a {
	display:block;
	text-decoration:none;
	font-weight:bold;
	border-radius:15px;
	font-weight:bold;
	text-align:center;
	padding:3px;
	border:2px solid #ffb75f;
	filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4));}

.weather-link a:link {
	background-color:#fff;
	color:#ff8d00;
}

.weather-link a:visited {
	background-color:#fff;
	color:#ff8d00;
}

.weather-link a:hover {
	background-color:#fff;
	color:#ffb75f;
}

/* 天気 */
.weather {
	text-align:center;
}


.weather h2 {
	font-size:1rem;
	background-color: #0071bc;
	font-weight: bold;
	color: #fff;
	padding:3px 10px;
	margin:0;
	display:inline;
	border-radius:5px;
}

.weather table,
.weather table th,
.weather table td {
	border:none;
}

.weather table th {
	text-align:center;
}

.weather dl {
	display:inline;
}

.weather dt {
	margin-left:2em;
}

.weather table th span,
.weather dt span {
	border:1px solid #505050;
	padding:0 10px;
	border-radius:5px;
	display:inline-block;
}




/* SNSリンク */
.sns {
	justify-content: space-between;
/*	padding:0 1em; */
	flex-wrap:nowrap;
}

.sns img {
	width:100%;
}

.icon-insta {
/*	flex-basis:30%; */
	padding:0.5em;
}

.icon-fb {
/*	flex-basis:30%; */
	padding:0.5em;
}

.icon-youtube {
/*	flex-basis:30%; */
	padding:0.5em;
}

.icon-tw {
		padding:0.5em;
}

/* ピックアップコンテンツ */
.pickup {
	margin:4em 0;
	background-color:#cce8f7;
	text-align:center;
 justify-content: center;
}

.pickup div {
margin:1.5%;
}

.pickup img {
	margin:30px 1%;
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);

	width:205px;
}


/* 外部コンテンツ */
.top_widget {
	justify-content:center;
	padding-bottom:4em;
	background-image:url(../images/bg_bn.png);
	background-position:bottom;
	background-repeat:repeat-x;
	text-align:center;
}

.top_widget h2 {
  display: inline-flex;
justify-content:center;
  align-items: center;
  gap: 10px;
	width:90%;
    margin: 0 auto 20px auto;
}

.top_widget h2::before,
.top_widget h2::after {
  content: "";
  height: 1px;
  background-color: #000;
	flex-basis:30px;
}


.youtube {
/*
	overflow:hidden;
	flex-basis:44%;
*/
position:relative;
width:100%;
padding-top:56%;
margin-top:20px;
}

.youtube iframe {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	right:0;
}
.bn-modelcourse {
	flex-basis:44%;
}

.bn-amahashi {
	flex-basis:21%;
	margin:0 3%;
}

.bn-chienoyu {
	flex-basis:21%;
}

.bn-chienoyu a {
	border:1px solid #999;
	display:block;
}

@media screen and (max-width: 640px) {
.left-block {
	flex-basis:100%;
	margin:0 2%;
}

.right-block {
	flex-basis:100%;
	margin:0 2%;
}

.livecam-img {
	flex-basis:100%;
}

.livecam-img img {
	width:100%;
}

.youtube {
/*
	overflow:hidden;
	flex-basis:95%;
	margin:2%;
*/
}

.bn-modelcourse {
	flex-basis:95%;
	margin:2%;
}

.pickup {
	padding:1em 0;
	margin:2em 0;
}

.pickup div {
	flex-basis:45%;
}

.pickup div img {
	width:100%;
	margin:0;

}

.bn-amahashi {
	flex-basis:45%;
	margin:2%;
}

.bn-chienoyu {
	flex-basis:45%;
	margin:2%;
}

}

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

  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

/* レイアウト位置指定 */
.news {
  grid-column: auto;
  grid-row: auto;
  order:2;
}

.livecam {
  grid-column: auto;
  grid-row: auto;
  order:1;
}

.sns {
  grid-column: auto;
  grid-row: auto;
  order:3;
}

.youtube {
  grid-column: auto;
  grid-row: auto;
  order:4;
}


	.information h4 {
		margin:0;
	}

	.information .left-block{
		flex-basis:100%;
		margin-bottom:20px;
	}

	.information .right-block{
		flex-basis:100%;
	}

	.information .status .flex-container {
		justify-content:center;
	}
/*
	.last-ride-label {
		  display: inline-flex;
		  align-items: center;
		  font-size: 14px;
		  gap: 10px;
		border:none;
		width:100%
	}

	.last-ride-label::before,
	.last-ride-label::after {
	  content: "";
	  flex-grow: 1;
	  height: 1px;
	  background-color: #000;
	}
*/
	.responsive-icon {
	  width: 100%;
	  max-width: 50px;
	  height: auto;
	}

	.last-ride{
		font-size:13px;
	}

	.last-ride span {
		font-size:13px;
		border:none;
		padding:0;
		font-weight:bold;
	}

}