@charset "utf-8";
/* CSS Document */
html,body {
	font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	color:#fff;
	font-size: 16px;
	font-weight: 400!important;
	font-style: normal;
	line-height: 1.5;
}
	@media only screen and (max-width: 750px){
	html,body {
		font-size: 4vw;
	}
	}

.pc { display:block; }
.sp { display:none; }

	@media only screen and (max-width: 750px){
	.mt80 { margin-top: 40px!important;}
	.mt120 { margin-top: 60px!important;}
	.pc { display:none; }
	.sp { display:block; }
	}

.bold {font-weight:bold;}
a.txt:link, a.txt:visited,a.txt:hover,a.txt:active {
	color:#1D2B36!important;
	border-bottom:#1D2B36 1px dotted;
}

a:link, a:visited,a:hover,a:active {
	color:#fff!important;
	border-bottom:#fff 1px dotted;
}
span.text_line_y {
	background:linear-gradient(transparent 60%, #ff6 60%);
}
ul.caution li{
	text-indent:-1em;
	padding-left:1em;
	line-height: 1.5em;
	padding-bottom:.3em;
}

.wrapper {
    min-height: 100vh;
    position: relative;
    box-sizing: border-box;
}
section {
	width:100%;
	margin:auto;
}

/* header */
h1 {
    overflow: hidden;
}
h1 img {
    width: 100%;
    object-fit: cover;
}


p#lead {
	color:#1d2b36;
	width: 740px;
	margin: 120px auto;
	line-height: 2.0;
	text-align:center;
}

	@media only screen and (max-width: 750px){
		p#lead {
			width: 90%;
			margin: 60px auto;
			line-height: 1.6;
			text-align:left;
		}
	}

/* ポイント */
section#main {
	background-image:url(/ridetour/images/back_01.jpg);
	background-size: cover;
	background-position: center center;
	padding: 120px 0;
}

section#main div.point01 {
	width: 980px;
	margin: 0 auto 80px;
	position: relative;
	padding-bottom: 220px;
}

section#main div.point02 {
	width: 980px;
	margin: 200px auto 80px;
	position: relative;
}

section#main div.point03 {
	width: 980px;
	margin: 200px auto 150px;
	position: relative;
}

section#main div.point01 div.images,
section#main div.point03 div.images {
	width: 100%;
	height: auto;
}
section#main div.point02 div.images {
	width: 100%;
	height: auto;
	text-align: right;
}

section#main div.point01 div.images img,
section#main div.point02 div.images img,
section#main div.point03 div.images img {
	width: 700px;
	height: auto;
}
section#main div.point01 div.text {
	width: 450px;
	height:auto;
	background-image:url(/ridetour/images/back_02.jpg);
	position: absolute;
	top: 240px;
	right: 0;
	padding: 40px;
	line-height: 2.0;
	color:#fff;
}
section#main div.point02 div.text {
	width: 450px;
	height:auto;
	background-image:url(/ridetour/images/back_02.jpg);
	position: absolute;
	top: 240px;
	left: 0;
	padding: 40px;
	line-height: 2.0em;
	color:#fff;
}
section#main div.point03 div.text {
	width: 450px;
	height:auto;
	background-image:url(/ridetour/images/back_02.jpg);
	position: absolute;
	top: 240px;
	right: 0;
	padding: 40px;
	line-height: 2.0em;
	color:#fff;
}

section#main div.point01 div.text h3,
section#main div.point02 div.text h3,
section#main div.point03 div.text h3 {
	font-size: 24px;
	font-weight:bold;
	line-height: 1.5;
	margin-bottom: 32px;
}

	@media only screen and (max-width: 750px){
		section#main {
			background-image:url(/ridetour/images/back_01.jpg);
			background-size: cover;
			background-position: center center;
			padding: 60px 0;
		}

		section#main div.point01 {
			width: 90%;
			margin: 0 auto 40px;
			position: relative;
			padding-bottom: 0px;
		}

		section#main div.point02 {
			width: 90%;
			margin: 2em auto 1em;
			position: relative;
		}

		section#main div.point03 {
			width: 90%;
			margin: 2em auto 1em;
			position: relative;
		}

		section#main div.point01 div.images,
		section#main div.point03 div.images {
			width: 100%;
			height: auto;
		}
		section#main div.point02 div.images {
			width: 100%;
			height: auto;
			text-align: right;
		}

		section#main div.point01 div.images img,
		section#main div.point02 div.images img,
		section#main div.point03 div.images img {
			width: 100%;
			height: auto;
		}
		section#main div.point01 div.text,
		section#main div.point02 div.text,
		section#main div.point03 div.text {
			width: 100%;
			height:auto;
			background-image:url(/ridetour/images/back_02.jpg);
			position: relative;
			top: 0;
			right: 0;
			padding: 1em;
			line-height: 1.6em;
			color:#fff;
		}

		section#main div.point01 div.text h3,
		section#main div.point02 div.text h3,
		section#main div.point03 div.text h3 {
			font-size: 5vw;
			font-weight:bold;
			line-height: 1.5;
			margin-bottom: 1em;
		}
		p.flow {
		width: 95%;
		margin:auto;
		}
		p.flow > img {
		width: 100%;
		height: auto;
		}
	}

/* スケジュール */
section#schedule {
	background-image:url(/ridetour/images/back_03.jpg);
	background-size: cover;
	background-position: center center;
    height: auto;
	padding: 120px 0;
}

section#schedule .contents {
	width:980px;
	margin:auto;
	line-height: 1.5em;
}

section#schedule .contents h2 {
	text-align:center;
}
section#schedule .contents h3 {
	font-size: 40px;
	font-weight:bold;
	line-height: 1.5em;
	margin: 80px 0 40px;
}


section#schedule .contents div.time div:nth-of-type(odd) {
	width:700px;
	margin-top: 40px;
	padding-left: 70px;
	min-height: 50px;
}
section#schedule .contents div.time div:nth-of-type(even) {
	width:700px;
	margin-left: 280px;
	margin-top: 40px;
	padding-left: 70px;
	min-height: 50px;
}

section#schedule .contents div.ymh {
	background-image:url(/ridetour/images/icon_yellow.svg);
	background-repeat:no-repeat;
}

section#schedule .contents div.zmh {
	background-image:url(/ridetour/images/icon_green.svg);
	background-repeat:no-repeat;
}
section#schedule .contents div.move {
	background-image:url(/ridetour/images/icon_white.svg);
	background-repeat:no-repeat;
}

section#schedule .contents div span {
	font-size: 24px;
	font-weight:bold;
	line-height: 1.5em;
}

p.hr {
  position:relative;
  border-top: 2px dashed #fff;
  border-right: none;
  border-bottom: none;
  border-left: none;
  margin-top: 80px;
}

.hricon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
	@media only screen and (max-width: 750px){
	section#schedule {
		background-image:url(/ridetour/images/back_03.jpg);
		background-size: cover;
		background-position: center center;
		height: auto;
		padding: 60px 0;
	}

	section#schedule .contents {
		width:90%;
		margin:auto;
		line-height: 1.5em;
	}

	section#schedule .contents h2 {
		text-align:center;
	}
	section#schedule .contents h3 {
		font-size: 5vw;
		font-weight:bold;
		line-height: 1.5em;
		margin: 40px 0 20px;
	}


	section#schedule .contents div.time div:nth-of-type(odd),
	section#schedule .contents div.time div:nth-of-type(even){
		width:100%;
		margin-top: 40px;
		margin-left: 0;
		padding-left: 10%;
		min-height: 50px;
	}
	section#schedule .contents div.ymh {
		background-image:url(/ridetour/images/icon_yellow.svg);
		background-repeat:no-repeat;
		background-size: 8%;
	}

	section#schedule .contents div.zmh {
		background-image:url(/ridetour/images/icon_green.svg);
		background-repeat:no-repeat;
		background-size: 8%;
	}
	section#schedule .contents div.move {
		background-image:url(/ridetour/images/icon_white.svg);
		background-repeat:no-repeat;
		background-size: 8%;
	}

	section#schedule .contents div span {
		font-size: 4.5vw;
		font-weight:bold;
		line-height: 1.5em;
	}

	p.hr {
	  position:relative;
	  border-top: 2px dashed #fff;
	  border-right: none;
	  border-bottom: none;
	  border-left: none;
	  margin-top: 40px;
	}

	.hricon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}
	}

/* 詳細 */
section#details {
	background-color: #CFD4D8;
    height: auto;
	padding: 120px 0;
	text-align: center;
}

section#details h4 {
	font-size: 24px;
	font-weight:bold;
	color: #1D2B36;
	margin-top: 40px;
	margin-bottom: 120px;
}
section#details h5 {
	width: 700px;
	height: 50px;
	display:inline-block;
	margin: 0 auto;
	background-color:#1D2B36;
	color: #fff;
	font-weight: bold;
	font-size: 24px;
	line-height: 50px;

}

section#details div.box {
	width: 700px;
	height: auto;
	background-color:#fff;
	color: #1D2B36;
	text-align: left;
	line-height: 1.5;
	margin: 0 auto;
	padding:40px;
}

section#details ul.list li {
	text-indent:-1.2em;
	padding-left:1em;
	padding-bottom: 1em;

}
section#details ul.list li span {
	font-weight: bold;
}
section#details ul.list li:before {
	content: "■";
    display: inline-block;
	margin-left: 20px;
}
section#details div.table {
	width: 80%;
	margin:auto;
}
.l_em { margin-left: 4.1em;}

	@media only screen and (max-width: 750px){
		section#details {
			background-color: #CFD4D8;
			height: auto;
			padding: 60px 0;
			text-align: center;
		}

		section#details h4 {
			font-size: 5vw;
			font-weight:bold;
			color: #1D2B36;
			margin-top: 40px;
			margin-bottom: 60px;
		}
		section#details h5 {
			width: 90%;
			height: 50px;
			display:inline-block;
			margin: 0 auto;
			background-color:#1D2B36;
			color: #fff;
			font-weight: bold;
			font-size: 5vw;
			line-height: 50px;

		}

		section#details div.box {
			width: 90%;
			height: auto;
			background-color:#fff;
			color: #1D2B36;
			text-align: left;
			line-height: 1.5;
			margin: 0 auto;
			padding:20px;
		}

		section#details ul.list li {
			text-indent:-1.2em;
			padding-left:1em;
			padding-bottom: 1em;

		}
		section#details ul.list li span {
			font-weight: bold;
		}
		section#details ul.list li:before {
			content: "■";
			display: inline-block;
			margin-left: 20px;
		}
		section#details div.table {
			width: 100%;
		}
		section#details div.table img {
			width: 100%;
			height: auto;
		}
		.l_em { margin-left: 0em; }
	}

section#details2 {
	background-color: #1D2B36;
    height: auto;
	padding: 120px 0;
	text-align: center;
}
.w500 {
	width: 500px;
	margin: 0 auto;
}
section#details2 div.hotels {
	width: 700px;
	margin:0 auto;
	text-align: left;

}

section#details2 div.hotels h5 {
	font-size: 24px;
	font-weight:bold;
	color: #fff;
	margin-top: 80px;
	margin-bottom: 24px;
}
section#details2 div.hotels span {
	font-weight: bold;
}
section#details2 div.img {
	width: 980px;
	height: auto;
	margin: 80px auto;
}

section#details2 div.img img {
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 750px){
}


section#details3 {
	background-color: #F5F6F7;
    height: auto;
	padding: 120px 0;
	text-align: left;
	color: #1D2B36
}

section#details3 div.box {
	width: 700px;
	height: auto;
	color: #1D2B36;
	line-height: 1.5;
	margin: 0 auto 80px;

}
section#details3 div.box h5 {
	font-size: 24px;
	font-weight:bold;
	color: #1D2B36;
	margin-bottom: 24px;
}

section#details3 ul.list li {
	text-indent:-1.2em;
	padding-left:1em;
	padding-bottom: 1em;

}
section#details3 ul.list li span {
	font-weight: bold;
}
section#details3 ul.list li:before {
	content: "■";
    display: inline-block;
	margin-left: 20px;
}
section#details3 hr {
	border-top:#1D2B36 1px solid;
	width: 700px;
	margin:0 auto 80px;
}

section#details3 div.btn {
	width: 700px;
	height: 100px;
	line-height: 100px;
	background-color: #1D2B36;
	color:#fff;
	font-size: 24px;
	font-weight: bold;
	text-align:center;
	margin-top: 80px;
}
section#details3 div.w500{
	width:500px;
	margin:0 auto;
}
section#details3 dl {
	width:500px;
	margin:0;
}
section#details3 dl dt {
	width:150px;
	float:left;
	padding-bottom:.3em;
}
section#details3 dl dd {
	width:350px;
	float:left;
	padding-bottom:.3em;
}
section#details3 dl::after{
  content: "";
  display: block;
  clear: both;
}


	@media only screen and (max-width: 750px){
		section#details2 {
			background-color: #1D2B36;
			height: auto;
			padding: 60px 0;
			text-align: center;
		}
		.w500 {
			width: 90%;
			margin: 0 auto;
		}
		.w500 img {
			width:100%;
			height: auto;
		}
		section#details2 div.hotels {
			width: 90%;
			margin:0 auto;
			text-align: left;

		}

		section#details2 div.hotels h5 {
			font-size: 5vw;
			font-weight:bold;
			color: #fff;
			margin-top: 40px;
			margin-bottom: 24px;
		}
		section#details2 div.hotels span {
			font-weight: bold;
		}
		section#details2 div.img {
			width: 90%;
			height: auto;
			margin: 40px auto;
		}

		section#details2 div.img img {
			width: 90%;
			height: auto;
		}
		section#details3 div.w500{
			width:90%;
			margin:0 auto;
		}
		section#details3 dl {
			width:90%;
			margin:0 auto;
		}
		section#details3 dl dt {
			width:100%;
			float:none;
		}
		section#details3 dl dd {
			width:100%;
			float:none;
			padding-left:1em;
		}

	}


section#details3 {
	background-color: #F5F6F7;
    height: auto;
	padding: 120px 0;
	text-align: left;
	color: #1D2B36
}

section#details3 div.box {
	width: 700px;
	height: auto;
	color: #1D2B36;
	line-height: 1.5;
	margin: 0 auto 80px;

}
section#details3 div.box h5 {
	font-size: 24px;
	font-weight:bold;
	color: #1D2B36;
	margin-bottom: 1em;
}

section#details3 ul.list li {
	text-indent:-1.2em;
	padding-left:1em;
	padding-bottom: 1em;

}
section#details3 ul.list li span {
	font-weight: bold;
}
section#details3 ul.list li:before {
	content: "■";
    display: inline-block;
	margin-left: 20px;
}
section#details3 hr {
	border-top:#1D2B36 1px solid;
	width: 700px;
	margin:0 auto 80px;
}

section#details3 div.btn {
	width: 700px;
	height: 100px;
	line-height: 100px;
	background-color: #1D2B36;
	color:#fff;
	font-size: 24px;
	font-weight: bold;
	text-align:center;
	margin-top: 80px;
}

	@media only screen and (max-width: 750px){
		section#details3 {
		background-color: #F5F6F7;
		height: auto;
		padding: 60px 0;
		text-align: left;
		color: #1D2B36
		}

		section#details3 div.box {
			width: 90%;
			height: auto;
			color: #1D2B36;
			line-height: 1.5;
			margin: 0 auto 40px;

		}
		section#details3 div.box h5 {
			font-size: 5vw;
			font-weight:bold;
			color: #1D2B36;
			margin-bottom: 1em;
		}

		section#details3 ul.list li {
			text-indent:-1.2em;
			padding-left:1em;
			padding-bottom: 1em;

		}
		section#details3 ul.list li span {
			font-weight: bold;
		}
		section#details3 ul.list li:before {
			content: "■";
			display: inline-block;
			margin-left: 20px;
		}
		section#details3 hr {
			border-top:#1D2B36 1px solid;
			width: 90%;
			margin:0 auto 40px;
		}

		section#details3 div.btn {
			width: 100%;
			height: 80px;
			line-height: 80px;
			background-color: #1D2B36;
			color:#fff;
			font-size: 5vw;
			font-weight: bold;
			text-align:center;
			margin-top: 40px;
		}
	}


footer {
		background-color: #1D2B36;
		padding: 80px 0;
}
footer ul.contact {
	width: 980px;
	margin: 0 auto;
}
footer ul.contact li {
	float: left;
	width:33%;
}
footer ul.contact li h6 {
	font-size: 24px;
	font-weight: bold;
}
footer ul.contact li span {
	display: inline-block;
	font-weight: bold;
	padding-bottom:1em;
}
footer ul.contact::after {
  content: "";
  display: block;
  clear: both;
}

	@media only screen and (max-width: 750px){
		footer {
				background-color: #1D2B36;
				padding: 40px 0;
		}
		footer ul.contact {
			width: 90%;
			margin: 0 auto;
		}
		footer ul.contact li {
			float: none;
			width:100%;
			padding-bottom: 2em;
		}
		footer ul.contact li h6 {
			font-size: 5vw;
			font-weight: bold;
		}
		footer ul.contact li span {
			display: inline-block;
			font-weight: bold;
			padding-bottom:1em;
		}
		footer ul.contact::after {
		  content: "";
		  display: block;
		  clear: both;
		}
	
	}

div.end {
	color:#f00;
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	margin-top: 50px;
	margin-bottom: -100px;
}
p.end {
	color:#f00;
	font-size: 110%;
	}
	@media only screen and (max-width: 750px){
		div.end {
		margin-bottom: 0px;
	}
	}