@charset "UTF-8";

:root {
    --mainColor: #2CA93F;
    --guideColorBlue: #7e7fcf;
    --guideColorPink: #f28481;
    --guideColorOrange: #fa6713;
    --guideColorGreen: #92b631;
    --guideColorPurple: #be77ae;
    --guideColorEme: #47abba;
    --guideColorBrown: #c19841;
	}

:where(#eco, #app, #use, #vehicle, #guide, #info){
	position: relative;
	}
	:where(#eco, #app, #use, #vehicle, #guide, #info):after{
		content: "";
		position: absolute;
		top:0;
		left: 0;
		height: 6px;
		width: 100%;
		z-index: -10;
		background: var(--mainColor);
		z-index: 1;
		}

#main{
	position: relative;
	line-height: 1.6;
	font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	height: 100%;
	}
	#main article,
	#main section{
		display: grid;
		}
	#main section {
		padding: 0;
		}
	#main h2{
		font-weight: bold;
		color: var(--mainColor);
		text-align: center;
		}
	#main h3{
		font-weight: bold;
		text-align: center;
		}
	#main img{
		width: 100%;
		}
	#main a:hover{
		opacity: .8;
		text-decoration: none;
		}
	#main .strong{
		font-weight: bold;
		}
	#main .note {
		text-indent: -1em;
		padding-left: 1em;
		}
	#main .mark li{
		position: relative;
		padding-left: 1em;
		}
		#main .mark li:before {
			content: "";
			width: .25em;
			height: .25em;
			background: #000;
			border-radius: 100%;
			position: absolute;
			top: .5em;
			left: .5em;
			transform: translate(-50%, 50%);
			}
	#main .bubble{
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: .5em;
		font-weight: bold;
		text-align: center;
		color: var(--guideColorOrange);
		}
		#main .bubble:before,
		#main .bubble:after{
			content: "";
			width: 1.5em;
			height: 3px;
			transform: rotate(60deg);
			box-sizing: border-box;
			background-color: var(--guideColorOrange);
			}
		#main .bubble:after {
			transform: rotate(-60deg);
			}
	@media (max-width: 767.98px) {
		#main article,
		#main section{
			grid-gap: 2em;
			}
		#main h2{
			font-size: 1.8em;
			}
		#main h3{
			margin-top: 0.5em;
			font-size: 1.4em;
			}
		}
	@media (min-width: 768px) {
		#main article,
		#main section{
			grid-gap: 3em;
			}
		#main h2{
			font-size: 2.5em;
			}
		#main h3{
			margin-top: 1em;
			font-size: 1.8em;
			}
		}

#hero{
	padding-top: 0;
	}
	#hero h2 {
		color: transparent;
		position: relative;
		overflow: hidden;
		font-size: 1.5em;
		}
		#hero h2:before,
		#hero h2:after {
			content: "";
			width: min(100%, 900px);
			}
		#hero h2:before {
			aspect-ratio: 2 / 1;
			background: url(../images/heroTitle.png) center no-repeat;
			background-size: contain;
			display: block;
			margin: 0 auto;
			}
		#hero h2:after {
			position: absolute;
			left: 50%;
			top: 2%;
			aspect-ratio: 1 / 1;
			transform: translateX(-50%) translateY(-44%) rotate(0deg);
			background: url(../images/heroRotate.png) center no-repeat;
			background-size: contain;
			animation: rotateAnimation 60s linear infinite;
			}
	#hero h3{
		display: flex;
		align-items: center;
		margin: auto;
		line-height: 1.2em;
		font-weight: bold;
		text-align: center;
		color: var(--guideColorOrange);
		}
		#hero h3:before,
		#hero h3:after{
			content: "";
			width: 2em;
			height: 3px;
			transform: rotate(60deg);
			box-sizing: border-box;
			background-color: var(--guideColorOrange);
			}
		#hero h3:after {
			transform: rotate(-60deg);
			}
	#hero ul {
		display: grid;
		grid-gap: 1em;
		}
		#hero ul a {
			display: grid;
			align-items: center;
			justify-items: center;
			text-align: center;
			padding: 1em 0;
			width: 100%;
			color: #fff;
			font-weight: bold;
			background: var(--mainColor);
			border-radius: .5em;
			cursor: pointer;
			position: relative;
			}
			#hero a:after {
				content: "";
				display: inline-block;
				margin-right: 0.5em;
				width: 1em;
				height: 1em;
				background: url("../images/img-arrow.png") center no-repeat;
				position: absolute;
				right: .5em;
				}
	@keyframes rotateAnimation {
		0% {
			transform: translateX(-50%) translateY(-44%) rotate(0deg);
			}
		100% {
			transform: translateX(-50%) translateY(-44%) rotate(-360deg);
			}
		}
	@media (max-width: 767.98px) {
		#hero{
			grid-gap: 1em;
			}
			#hero h3{
				font-size: 1.2em;
				}
		}
	@media (min-width: 768px) {
		#hero{
			text-align: center;
			}
			#hero h2 {
				margin-top: -1em;
				padding-bottom: 1em;
				}
			#hero p{
				padding: 1em 0;
				}
			#hero ul{
				grid-template-columns: repeat(2, 1fr);
				}
		}
	@media (min-width: 992px) {
		#hero ul {
			grid-template-columns: repeat(5, 1fr);
			}
			#hero ul a {
				padding-right: 1em;
				font-size: 0.8em;
				}
		}

#eco{
	background: #97c94f;	
	}
	#eco h2{
		color: #fff;
		}
	#eco>div+div{}
		#eco>div+div a{
		background: var(--mainColor);
		position: relative;
		border-radius: .25em;
		}
			#eco>div+div a:after {
				content: "";
				display: inline-block;
				height: 1em;
				width: 1em;
				margin-left: 1em;
				background: url(../images/img-arrow.png) center no-repeat;
				}

#ecoCoupon{
	display: grid;
	border-radius: 0.5em;
	background: #fff;
	}
	#ecoCoupon figure{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1em;
		background: #eee;
		border-radius: 0.5em;
		position: relative;
		}
	#ecoCoupon img{
		width: auto;
		max-height: 200px;
		}
	#ecoCoupon figcaption{
		content: "";
		position: absolute;
		left: 0;
		font-weight: bold;
		}
	#ecoCoupon dl{
		border-radius: 0.5em;
		}
	#ecoCoupon dt{
		font-weight: bold;
		display: flex;
		align-items: center;
		font-weight: bold;
		}
		#ecoCoupon dt:before{
			content: "";
			width: 0.8em;
			height: 0.8em;
			background: #ffd212;
			border-radius: 100%;
			margin-right: .25em;
			}
	#ecoCoupon dd{}
		#ecoCoupon dd+dt{
			margin-top: 1em;
			}
	@media (max-width: 991.98px) {
		#ecoCoupon{
			grid-gap: 1em;
			padding: 2.5em 1em 1em;
			}
			#ecoCoupon figcaption{
				top: -1.75em;
				}
			#ecoCoupon dt{
				font-size: 1.2em;
				}
		}
	@media (min-width: 992px) {
		#ecoCoupon{
			grid-gap: 2em;
			grid-template-columns: 0.5fr 1fr;
			padding: 2.5em 2em 2em;
			}
			#ecoCoupon img{
				max-height: 400px;
				}
			#ecoCoupon figcaption{
				top: -1.5em;
				left: 0;
				}
			#ecoCoupon dl{
				padding: 1em 0;
				}
			#ecoCoupon dt{
				font-size: 1.6em;
				}
			#ecoCoupon dd{
				font-size: 1.2em;
				}
		}
	@media (min-width: 768px) and (max-width: 991.98px) {
			#ecoCoupon{
				grid-gap: 2em;
			grid-template-columns: 0.5fr 1fr;
				max-width: 80%;
				padding: 3em 2em 2em;
				}
		}

#use{}
	#use>div:nth-of-type(1) {
		display: grid;
		}
		#use>div:nth-of-type(1) dl {
			display: grid;
			align-content: flex-start;
			padding: 1em;
			border: solid 1px #eee;
			border-radius: 10px;
			background: #fff;
			}
		#use>div:nth-of-type(1) dt {
			align-content: center;
			height: 3.5em;
			font-weight: bold;
			font-size: 1.2em;
			line-height: 1.2em;
			text-align: center;
			}
		#use>div:nth-of-type(1) dd+dd {
			position: relative;
			order: -1;
			padding-top: 77%;
			}
		#use>div:nth-of-type(1) dd img {
			position: absolute;
			inset: 0;
			width: 100%;
			}
	#use>div:nth-of-type(2) {
		display: grid;
		align-items: baseline;
		}
		#use>div:nth-of-type(2) h3 {
			font-weight: bold;
			display: flex;
			align-items: center;
			padding-bottom: .5em;
			margin-bottom: 1em;
			font-size: 1.2em;
			border-bottom: 1px solid #ccc;
			}
			#use>div:nth-of-type(2) h3:before {
				content: "";
				width: .5em;
				height: .5em;
				background: var(--guideColorBrown);
				border-radius: 100%;
				margin-right: .5em;
				}
		#use .useRequire{}
			#use .useRequire div {
				margin-bottom: .5em;
				padding: .25em .5em;
				font-size: 1.4em;
				font-weight: bold;
				background: #fff88d;
				}
				#use .useRequire div span{
					color: red;
					font-size: .6em;
					display: block;
					}
		#use .useMix{}
			#use .useMix ul:nth-of-type(1) {
				margin-bottom: .5em;
				}
				#use .useMix ul:nth-of-type(1) li {
					font-weight: bold;
					}
		#use .useTicket{
			position: relative;
			}
			#use .useTicket dl{}
				#use .useTicket dt{
					font-weight: bold;
					display: inline-block;
					padding-bottom: 0.5em;
					}
			#use .useTicket a{
				display: block;
				margin-top: 1em;
				color: var(--mainColor);
				}
				#use .useTicket a:hover{
					text-decoration: underline;
					}
	#use>div:nth-of-type(3) {
		text-align: center;
		}
	#use>div:nth-of-type(3) a {
		background: var(--mainColor);
		position: relative;
		border-radius: .25em;
		}
		#use>div:nth-of-type(3) a:after {
			content: "";
			width: 20px;
			height: 20px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m4.18,15h11.64v1.68H4.18v-1.68Zm11.64-7.5l-5.82,5.82-5.82-5.82h3.32V2.5h5v5h3.32Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: currentColor;
			}
@media (max-width: 767.98px) {
	#use>div:nth-of-type(1) {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 0.5em;
		}
	#use>div:nth-of-type(2) {
		grid-gap: 2em;
		}
	}
@media (min-width: 768px) {
	#use>div:nth-of-type(1) {
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 1.5em;
		}
	#use>div:nth-of-type(2) {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 3em;
		}
	}

#app{
	position: relative;
	background: #fff;
	}
	#app>div{}
	#app h2{
		color: transparent;
		background: url("../images/appTitle.svg") center no-repeat;
		background-size: contain;
		position: relative;
		z-index: 2;
		}
		#app h2:before{
			content: "";
			background: url("../images/appDeco.svg") center no-repeat;
			background-size: contain;
			position: absolute;
			top: -3em;
			left: 0;
			transform: translateX(-20%);
			width: 7em;
			height: 7em;
			}
	#app .bubble{
		width: 100%;
		top: 1em;
		left: 50%;
		transform: translateX(-50%);
		}
	@media (max-width: 991.98px) {
		#app{}
			#app h2{
				margin: 1.5em auto;
				font-size: 1.4em;
				}
				#app h2:before{
					display: none;
					}
			#app .bubble{
				font-size: 1.2em;
				}
		}
	@media (min-width: 992px) {
		#app{}
			#app h2{
				margin: 1.5em auto 2em;
				font-size: 2em;
				}
				#app h2:before{
					left: 1em;
					}
			#app .bubble{
				font-size: 1.8em;
				}
		}
	@media (min-width: 1200px) {
		#app{}
			#app h2{
				font-size: 2.3em;
				}
			#app .bubble{
				top: 1.5em;
				}
		}

	#appDw{
		display: grid;
		}
		#appDw>div:has(h3){
			display: grid;
			background: #f2f2f2;
			border-radius: 0.5em;
			}
		#appDw h3{
			display: grid;
			grid-template-columns: 32px auto;
			justify-content: center;
			align-items: center;
			margin-top: 0;
			order: -1;
			}
			#appDw h3:before{
				content: "";
				width: 32px;
				height: 32px;
				background-size: contain;
				}
				#appDw>div:has([href*="apple"]) h3:before{
					background: url("../images/appIconApple.svg") no-repeat;
					}
				#appDw>div:has([href*="google"]) h3:before{
					background: url("../images/appIconAndroid.svg") no-repeat;
					}
		#appDw figure{
			order: -1;
			margin: auto;
			}
			#appDw figure img{
				aspect-ratio: 1;
				}
		#appDw dl{
			display: flex;
			justify-content: center;
			align-items: center;
			}
		#appDw dt{
			padding: 1em 1em 1em 0;
			height: 100%;
			border-right: 1px solid;
			white-space: nowrap;
			}
		#appDw dd{
			display: grid;
			padding: 0 0 0 1em;
			}
		#appDw .note{
			font-size: 0.8em;
			}
	@media (max-width: 767.98px) {
		#appDw{
			grid-gap: 2em;
			align-items: center;
			margin-top: 2em;
			}
			#appDw>div:has(h3){
				grid-gap: 1em;
				padding: 1.5em;
				}
			#appDw figure{}
				#appDw figure img{
					width: 110px;
					}
			#appDw a{}
				#appDw a img{
					max-height: 55px;
					}
			#appDw dl+div{
				grid-row: 3;
				}
		}
	@media (min-width: 768px) {
		#appDw{
			grid-template-columns: 1fr 1fr;
			grid-gap: 1em 2em;
			margin-top: 3em;
			position: relative;
			}
			#appDw>div:has(h3){
				grid-template-columns: 1fr 120px auto;
				justify-items: flex-start;
				align-items: center;
				grid-gap: 1.5em;
				padding: 2em;
				}
			#appDw figure{
				padding: 0.5em;
				}
			#appDw a{}
				#appDw a img{
					width: 160px;
					max-height: 45px;
					}
			#appDw dl{
				grid-column: 1 / 2;
				justify-content: flex-start;
				}
			#appDw dl+div{
				grid-column: 2 / 3;
				text-align: center;
				}
		}
	@media (min-width: 768px) and (max-width: 991.98px) {
		#appDw{
			grid-template-columns: 1fr 1fr;
			grid-gap: 1em 2em;
			margin-top: 3em;
			position: relative;
			}
			#appDw>div:has(h3){
				grid-template-columns: 1fr;
				justify-items: center;
				grid-gap: 1em;
				padding: 1.5em;
				}
			#appDw figure{}
				#appDw figure img{
					width: 120px;
					}
			#appDw a{}
				#appDw a img{
					max-height: 55px;
					}
		}

#appStep{
	display: grid;
	counter-reset: section;
	}
	#appStep dl{
		display: grid;
		align-content: baseline;
		}
	#appStep dt{
		color: transparent;
		position: relative;
		}
		#appStep dt:before{
			counter-increment: section;
			content: "0" counter(section);
			font-weight: 900;
			font-size: 4em;
			line-height: 1.4;
			color: #ffd604;
			position: absolute;
			top: -1em;
			}
	#appStep dd+dd {
		position: relative;
		order: -1;
		text-align: center;
		}
	#appStep dd img {
		width: 85%;
		}
	@media (max-width: 767.98px) {
		#appStep{
			grid-gap: 2em;
			}
		#appStep>p{
			grid-row: 3;
			}
		#appStep dd img{
			width: 50%;
			}
		}
	@media (min-width: 768px){
		#appStep {
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 2em;
			}
		#appStep>p{
			grid-column: 1 / 5;
			grid-row: 2;
			}
		}

#purchase{
	position: sticky;
	text-align: right;
	padding: 0;
	bottom: 1em;
	z-index: 1;
	}
	#purchase a{
		position: absolute;
		bottom: 0em;
		right: 1.5em;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		text-align: center;
		border-radius: 100%;
		background: var(--guideColorBrown);
		color: #fff;
		}
	@media (max-width: 767.98px) {
		#purchase a{
			width: 6em;
			height: 6em;
			font-size: 0.8em;
			line-height: 1.25em;
			}
		}
	@media (min-width: 768px) {
		#purchase a{
			width: 8em;
			height: 8em;
			line-height: 1.4em;
			}
		}

#vehicle{
	width: 100%;
	}
	#vehicle>ul{
		display: grid;
		grid-gap: 1em;
		grid-template-columns: repeat(3, 1fr);
		text-align: center;
		position: relative;
		}
	#vehicle>ul li{
		color: #fff;
		font-weight: bold;
		padding: 1em 0;
		border-radius: .5em .5em 0 0;
		cursor: pointer;
		}
		#vehicle>ul li:after{
			content: "";
			position: absolute;
			inset: 0;
			top: auto;
			bottom: -.4em;
			height: .4em;
			background-color: inherit;
			display: none;
			}
		#vehicle>ul li#canBus{
			background-color:#29a73d;
			}
		#vehicle>ul li#lineBus{
			background-color:#8fc31f;}
		#vehicle>ul li#taxi{
			background-color:#2269b2;
			}
		#vehicle.canBus #canBus:after{
			display: block;
			}
		#vehicle.lineBus #lineBus:after{
			display: block;
			}
		#vehicle.taxi #taxi:after{
			display: block;
			}
	#vehicle>section{
		display: none;
		}
		#vehicle>section a{
			display: block;
			margin: auto;
			padding: 1em;
			color: #fff;
			width: max-content;
			border-radius: .25em;
			}
		#vehicle>section .infoTxt{
			display: grid;
			justify-items: center;
			grid-gap: 2em;
			text-align: center;
			}
		#vehicle>section .infoData{
			display: grid;
			grid-gap: 3em;
			justify-items: center;
			align-items: center;
			}
			#vehicle>section .infoData>div{
				display: grid;
				grid-gap: 1em;
				}

#canInfo{}
	#vehicle.canBus #canInfo{
		display: grid;
		}
		#canInfo .infoFree{
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 1em;
			}
			#canInfo .infoFree figure{
				width: 150px;
				}
		#canInfo a{
			background-color:#29a73d;
			}
	@media (min-width: 768px) {
		#canInfo .infoData{
			padding: 3em;
			grid-gap: 3em;
			grid-template-columns: repeat(2, 1fr);
			justify-items: left;
			}
		}

#lineInfo{}
	#vehicle.lineBus #lineInfo{
		display: grid;
		}
	#lineInfo .infoFree{
		display: grid;
		grid-gap: 2em;
		}
	#lineInfo a{
		background-color:#8fc31f;
		}
	@media (min-width: 768px) {
		#lineInfo .infoData{
			padding: 3em;
			grid-gap: 3em;
			grid-template-columns: repeat(2, 1fr);
			justify-items: left;
			}
		}

#taxiInfo{}
	#vehicle.taxi #taxiInfo{
			display: grid;
			}
		#taxiInfo .infoData{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 3em;
			}
			#taxiInfo .infoData dl{
				display: grid;
				align-content: baseline;
				grid-gap: 0.5em;
				}
			#taxiInfo .infoData dt{
				display: grid;
				justify-content: center;
				align-content: center;
				font-weight: bold;
				}
			#taxiInfo .infoData dd{
				justify-self: center;
				}
				#taxiInfo .infoData dd+dd{
					order: -1;
		/*			position: relative;
					padding-top: 77%;*/
					}
				#taxiInfo .infoData dd img{
		/*			position: absolute;
					inset: 0;
					width: 100%;*/
					}
		#taxiInfo .infoFree{
			display: grid;
			grid-gap: 2em;
			}
		#taxiInfo a{
			background-color:#2269b2;
			}
	@media (min-width: 768px) {
		#taxiInfo .infoData{
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 1.5em;
			}
			#taxiInfo .infoData dt{
				font-size: 1.25em;
				}
		}

#guide{
	width: 100%;
	}
	#guide [id^="katayama"]{
		--guideColor: var(--guideColorBlue);
		}
	#guide [id^="yamashiro"]{
		--guideColor: var(--guideColorPink);
		}
	#guide [id^="yamanaka"]{
		--guideColor: var(--guideColorGreen);
		}
	#guide [id^="daisyoji"]{
		--guideColor: var(--guideColorPurple);
		}
	#guide [id^="hashidate"]{
		--guideColor: var(--guideColorEme);
		}
	#guide [id^="other"]{
		--guideColor: var(--guideColorBrown);
		}
	#guide>ul{
		display: grid;
		text-align: center;
		position: relative;
		}
	#guide>ul li{
		color: #fff;
		font-weight: bold;
		padding: 1em;
		cursor: pointer;
		}
		#guide>ul li{
			background-color: var(--guideColor);
			}
		#guide>ul li:after{
			content: "";
			position: absolute;
			inset: 0;
			top: auto;
			bottom: -.4em;
			height: .4em;
			background-color: inherit;
			display: none;
			}
	#guide section{
		display: none;
		}
		#guide.katayama #katayamaList{
			display: grid;
			}
		#guide.yamashiro #yamashiroList{
			display: grid;
			}
		#guide.yamanaka #yamanakaList{
			display: grid;
			}
		#guide.daisyoji #daisyojiList{
			display: grid;
			}
		#guide.hashidate #hashidateList{
			display: grid;
			}
		#guide.other #otherList{
			display: grid;
			}
	/* List Styles */
		#guide [id$="List"] h3 {
			color: var(--guideColor);
			}
		#guide [id$="List"] h4 {
			color: var(--guideColor);
			}
		#guide [id$="List"] h3+p {
			color: var(--guideColor);
			}
		#guide [id$="List"] button {
			background-color: var(--guideColor);
			}
		#guide [id$="List"] * {
			border-color: var(--guideColor);
			}
	#guide section p {
		text-align: center;
		}
	#guide header {
		display: grid;
		grid-gap: 1em;
		padding: 0;
		justify-items: center;
		}
		#guide header h3{
			font-weight: bold;
			font-size: 2em;
			}
		#guide header h3+p{
			order: -1;
			}
		#guide header h3+p+button{
			color: #fff;
			width: min(100%, 15em);
			border-radius: .5em;
			}
			#guide header h3+p+button:after {
				content: "";
				display: inline-block;
				height: 1em;
				width: 1em;
				margin-left: 1em;
				background: url(../images/img-arrow.png) center no-repeat;
				}
		#guide .guideMap{
			display: none;
			padding-top: 2em;
			}
		#guide h4 {
			text-align: center;
			font-size: 1.25em;
			padding: .5em;
			margin-bottom: 2em;
			border-top: 1.5px solid;
			border-bottom: 1.5px solid;
			font-weight: bold;
			}
			#guide h4+div {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-gap: 2em;
				}
		#guide dl {
			display: grid;
			align-items: baseline;
			grid-gap: 0.5em;
			align-content: baseline;
			}
		#guide dt {
			font-weight: bold;
			padding-bottom: 0.5em;
			text-indent: -1.8em;
			padding-left: 1.8em;
			border-bottom: 1px dotted;
			}
			#guide dt[data-caption]:before {
				content: attr(data-caption);
				color: #fff;
				background-color: var(--guideColor);
				font-size: .9em;
				width: 1.5em;
				height: 1.5em;
				margin-right: .5em;
				text-align: center;
				display: inline-block;
				vertical-align: text-bottom;
				text-indent: -1em;
				padding-left: 1em;
				}
		#guide dd{
			font-size: .9em;
			}
			#guide dd:after{
				margin-left: 0.5em;
				padding: 4px 6px;
				font-size: 0.6em;
				line-height: 1em;
				letter-spacing: 0.1em;
				background: #bbb;
				border-radius: 4px;
				color: #fff;
				text-align: center;
				}
			#guide dd.guideTakeIn,
			#guide dd.guideTakeOut{
				display: grid;
				grid-template-columns: 1fr 4em;
				align-items: flex-start;
				font-weight: bold;
				line-height: 1.4em;
				position: relative;
				}
			#guide dd.guideTakeIn{}
				#guide dd.guideTakeIn:after{
					content: "IN";
					}
			#guide dd.guideTakeOut{}
				#guide dd.guideTakeOut:after{
					content: "OUT";
					}
			#guide dd.guideTakeIn.guideTakeOut{}
				#guide dd.guideTakeIn.guideTakeOut:after{
					content: "IN/OUT";
					}
			#guide dd:last-child{
				order: -1;
				}
			#guide dd:has(span){
				font-weight: bold;
				margin: .5em 0;
				}
			#guide p span,
			#guide dd span{
				color: #fff;
				font-size: .8em;
				padding: .1em .25em;
				margin: 0 .25em;
				display: inline-block;
				background: #bbb;
				text-indent: initial;
				border-radius: 4px;
				}
	#guide .guideSpot h4{
		display: none;
		}
	@media (max-width: 767.98px) and (orientation: portrait) {
		#guide>ul{
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 0.5em;
			}
		#guide>ul li{
			line-height: 1.2;
			border-radius: 0.5em;
			}
		}
	@media (min-width: 768px) {
		#guide>ul{
			grid-template-columns: repeat(6, 1fr);
			grid-gap: 1em;
			}
		#guide>ul li{
			border-radius: .5em .5em 0 0;
			}
		#guide>ul li:after{}
			#guide.katayama #katayama:after,
			#guide.yamashiro #yamashiro:after,
			#guide.yamanaka #yamanaka:after,
			#guide.daisyoji #daisyoji:after,
			#guide.hashidate #hashidate:after,
			#guide.other #other:after{
				display: block;
				}
		#guide h4+div {
			grid-template-columns: repeat(3, 1fr);
			}
		}
	@media (min-width: 992px) {
		#guide h4+div {
			grid-template-columns: repeat(4, 1fr);
			}
		}

#info{
	width: 100%;
	}
	#info section{
		grid-gap: 0;
		grid-template-columns: 30% 70%; 
		align-items: center;
		padding-top: 2em;
		border-top: 1px solid #ccc;
		}
		#info section:first-of-type .fr-view{}
			#info section:first-of-type .fr-view ul{
				list-style: disc;
				}
		#info section+section{
			border-bottom: 1px solid #ccc;
			padding-bottom: 2em;
			}
	#info h3{
		text-align: left;
		color: var(--mainColor);
		font-size: 1.2em;
		}
		#info .fr-view li{}
			#info .fr-view li+li{
				margin-top: 0.5em;
				}
	@media (max-width: 767.98px) and (orientation: portrait) {
		#info section{
			display: block;
			}
		#info h3{
			color: #1a1a1a;
			margin-bottom: 1em;
			}
		}

.txtBold{
	font-weight: bold;
	}

.clrRed{
	color: #CF0003;
	}