@charset "utf-8";

html {
	font-size: 62.5%; /* 16px × 0.625 = 10px(=1rem) */
	/*height: 100%;*/
}

body {
	font-family: "メイリオ", "ヒラギノ角ゴ ProN", "游ゴシック", sans-serif;
	font-size: 1.6rem;	/* 16px */
	/*min-height: 100%;
	display: grid;
	grid-template-rows: 1fr auto;*/
}

.red {
	color: #FF0000;
}

/* brank */
.br-pc {
	display: display;
}

.br-sp {
	display: none;
}

/* container */
.container {
	/*margin: 0 auto;*/
	/*margin-left: auto;
	margin-right: auto;*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Font Awesome */
.fa-solid {
	font-family: “Font Awesome 6 Free”;
	font-weight: 900;
}

.fa-regular {
	font-family: “Font Awesome 6 Free”;
	font-weight: 400;
}

.fa-brands {
	font-family: “Font Awesome 6 Brands”;
	font-weight: 400;
}

#header {
	margin: 10px 0;
	text-align: right;
}

#header .img_issr_logo {
	width: 10%;
}

#header .img_omu_logo {
	width: 8%;
}

.backprevpage {
	margin: 20px 0;
}

#main h2 {
	text-align: center;
}

#main .bf_pagetitle {
	font-size: 130%;
	margin-top: 20px;
	margin-bottom: 20px;
}

#main .overview {
	margin: 10px 0;
}

#main .overview .description {
	padding: 10px 30px 10px 30px;
}

#main .contents h2 {
	font-size: 120%;
	margin-bottom: 20px;
}

#main .contents .menu {
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	margin: 0px auto;
	padding: 20px;
	width: 100%;
}

#main .contents .menu .description {
	height: 135px;
}

#main .contents .description {
	padding: 10px 20px 10px 20px;
}

#main .contents input {
	width: 100%;
	height: 50px;
}

#main .contents select {
	width: 100%;
	height: 30px;
}

#main .contents .diasearch li {
	list-style: none;
	padding-left: 0px;
}

#main .contents .spot {
	border: 1px solid #d3d3d3;
	border-radius: 10px;
	min-height: 210px;
	margin: 0 0 10px 0;
	padding: 10px 20px 10px 20px;
}

#main .contents .spot h3 {
	font-size: 120%;
	font-weight: bold;
	text-align: center;
}

#main .contents .recommendedroute h3 {
	background-color: #add8e6;
	font-size: 120%;
	padding: 10px 5px 10px 5px;
}

#main .contents .recommendedroute table {
	margin: 5px 10px 10px 10px;
}

#main .contents .recommendedroute .col1 {
	width: 150px;
}

#main .contents .recommendedroute p {
	padding-left: 10px;
	padding-right: 10px;
}

#main .contents .routelist {
	margin-top: 20px;
}

#main .contents .routelist .forpc {
	display: block;
}

#main .contents .routelist .forsp {
	display: none;
}

#main .contents .routelist .rowtitle {
	width: 19%;
}

#main .contents .routelist .rowvalue {
	width: 27%;
}

#main .contents .routelist .pagenation {
	text-align: center;
	width: 100%;
}

#main .contents .routelist .pagenation .page {
	border: 1px solid #1e90ff;
	color: #1e90ff;
	float: left;
	height: 50px;
	width: 50px;
	text-align: center;
	padding: 10px 10px;
}

#main .contents .routelist .pagenation .selected {
	background-color: #1e90ff;
	color: #ffffff;
}

#main .contents .pointsofnote {
	margin: 10px auto;
}

/*
#main .contents .routelist h3 {
	background-color: #98fb98;
	font-size: 120%;
	padding: 10px 5px 10px 5px;
}
*/

#main .contents .routelist .terminal {
	background-color: #dcdcdc;
	font-size: 110%;
	padding: 10px 5px 10px 5px;
	width: 300px;
}

#main .contents .routelist .col1 {
	font-size: 110%;
	padding: 5px 0 5px 0;
	text-align: center;
	width: 30%;
}

#main .contents .routelist .col2 {
	font-size: 110%;
	padding: 5px 0 5px 0;
	width: 70%;
}

#main .contents .routeoverview h3 {
	background-color: #add8e6;
	font-size: 120%;
	padding: 10px 5px 10px 5px;
}

#main .contents .routeinfo {
	margin-top: 20px;
}

#main .contents .routeinfo h3 {
	background-color: #98fb98;
	font-size: 120%;
	padding: 10px 5px 10px 5px;
}
#main .contents .routeinfo .terminal {
	background-color: #dcdcdc;
	font-size: 110%;
	padding: 10px 10px 10px 10px;
	width: 500px;
}

#main .contents .routeinfo .col1 {
	font-size: 110%;
	padding: 5px 0 5px 0;
	text-align: center;
	width: 30%;
}

#main .contents .routeinfo .col2 {
	font-size: 110%;
	padding: 5px 0 5px 0;
	width: 70%;
}

#main .contents .transit {
	margin-top: 20px;
}

#main .contents .transit p {
	font-size: 110%;
}

#main .contents .transit ul {
	margin-left: 10px;
	margin-right: 10px;
}

#main .contents .item {
	border: 1px solid #d3d3d3;
	border-radius: 10px;
	margin: 0 0 10px 0;
	padding: 10px 20px 10px 20px;
}

#main .contents .item .partdescription {
	padding: 0 20px 0 20px;
}

#main .contact {
	margin: 10px 0;
}

#footer {
	background-color: #dcdcdc;
	border-top: 3px solid #c0c0c0;
	width: 100%;
	margin-top: auto;
	padding: 20px 10px 0 10px;
}

#footer li {
	list-style: none;
	padding-left: 0;
}

#footer .contact p {
	font-size: 1.5rem;
	padding: 0 20px 0 20px;
}

#footer .copyright {
	font-size: 1rem;
	margin: 10px auto;
	text-align: center;
}

@media screen and ( min-width : 1200px ) and ( max-width : 1400px) {
	#main .contents .menu .description {
		height: 160px;
	}

	#main .contents .spot {
		margin: 0 0 5px 0;
		min-height: 230px;
	}
}

@media screen and ( min-width : 991px ) and ( max-width : 1199px) {
	#main .contents .menu .description {
		height: 185px;
	}

	#main .contents .spot {
		min-height: 250px;
	}
}

@media screen and ( min-width : 769px ) and ( max-width : 990px) {
	#main .contents .menu .description {
		padding: 5px 5px 5px 5px;
		height: 225px;
	}

	#main .contents .spot {
		min-height: 350px;
	}
}

/* 365px～768pixel start */
@media screen and ( min-width : 365px ) and ( max-width : 768px ) {
	/* brank */
	.br-pc {
		display: none;
	}

	.br-sp {
		display: block;
	}

	#header .img_issr_logo {
		width: 20%;
	}

	#header .img_omu_logo {
		width: 20%;
	}

	#main .bf_pagetitle {
		margin-top: 5px;
		margin-bottom: 5px;
	}

	#main .overview {
		margin: 5px 0;
	}

	#main .overview .description {
		padding: 10px 10px 10px 10px;
	}

	#main .contents h2 {
		margin-bottom: 10px;
	}

	#main .contents .description {
		padding: 10px 10px 10px 10px;
	}

	#main .contents .menu {
		padding: 5px;
	}

	#main .contents .menu .description {
		height: auto;
		padding: 5px 10px 5px 10px;
	}

	#main .contents .recommendedroute h3 {
		font-size: 100%;
		padding: 10px 5px 10px 5px;
	}

	#main .contents .recommendedroute table {
		font-size: 1.5rem;
	}

	#main .contents .recommendedroute .col1 {
		width: 120px;
	}

	#main .contents .recommendedroute p {
		font-size: 1.5rem;
	}

	#main .contents .routelist .forpc {
		display: none;
	}

	#main .contents .routelist .forsp {
		display: block;
	}

	#main .contents .routelist .accordion-button {
		font-size: 1.5rem;
		font-weight: bold;
	}

	#main .contents .routelist .rowtitle {
		width: 53%;
	}

	#main .contents .routeinfo {
		margin-top: 10px;
	}

	#main .contents .routeinfo table {
		margin-top: 10px;
	}

	#main .contents .routeinfo .col3 {
		width: 125px;
	}

	#main .contents .item .partdescription {
		padding: 0 10px 0 10px;
	}

	#footer {
		padding: 10px 10px 0 10px;
	}

	#footer li {
		font-size: 1.1rem;
	}

	#footer .contact p {
		font-size: 1.1rem;
		padding: 0 5px 0 5px;
	}
}

/* ～364px start */
@media screen and ( max-width : 364px) {
	/* brank */
	.br-pc {
		display: none;
	}

	.br-sp {
		display: block;
	}

	#header .img_issr_logo {
		width: 20%;
	}

	#header .img_omu_logo {
		width: 20%;
	}

	#main .bf_pagetitle {
		margin-top: 5px;
		margin-bottom: 5px;
	}

	#main .overview {
		margin: 5px 0;
	}

	#main .overview .description {
		padding: 10px 10px 10px 10px;
	}

	#main .contents h2 {
		margin-bottom: 10px;
	}

	#main .contents .description {
		padding: 10px 10px 10px 10px;
	}

	#main .contents .menu {
		padding: 5px;
	}

	#main .contents .menu .description {
		height: auto;
		padding: 5px 10px 5px 10px;
	}

	#main .contents .recommendedroute h3 {
		font-size: 100%;
		padding: 10px 5px 10px 5px;
	}

	#main .contents .recommendedroute table {
		font-size: 1.5rem;
	}

	#main .contents .recommendedroute .col1 {
		width: 120px;
	}

	#main .contents .recommendedroute p {
		font-size: 1.5rem;
	}

	#main .contents .routelist .forpc {
		display: none;
	}

	#main .contents .routelist .forsp {
		display: block;
	}

	#main .contents .routelist .accordion-button {
		font-size: 1.5rem;
		font-weight: bold;
	}

	#main .contents .routelist .rowtitle {
		width: 53%;
	}

	#main .contents .routeinfo {
		margin-top: 10px;
	}

	#main .contents .routeinfo table {
		margin-top: 10px;
	}

	#main .contents .routeinfo .col3 {
		width: 125px;
	}

	#main .contents .item .partdescription {
		padding: 0 10px 0 10px;
	}

	#footer {
		padding: 10px 10px 0 10px;
	}

	#footer li {
		font-size: 1.1rem;
	}

	#footer .contact p {
		font-size: 1.1rem;
		padding: 0 5px 0 5px;
	}
}