@charset "utf-8";
/* ------------------------------------------

global CSS

------------------------------------------ */
br.sp {
	display: none;
}
br.pc {
	display: block;
}
.main {
	padding: 0 20px;
}
.main h1,
.main h2,
.main p {
	max-width: 1200px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.toptxt {
	margin: 0 auto 70px;
	font-size: 1.8rem;
	line-height: 3.5rem;
	text-align: center;
	/*letter-spacing: .2rem;*/
}
section.main h2 {
	margin: 0 auto 20px;
	font-size: 3.4rem;
	line-height: 1.6;
	text-align: center;
}
section.main h2 + p {
	text-align: center;
	line-height: 3.5rem;
	margin-bottom: 62px;
	/*letter-spacing: .2rem;*/
}
section.main .img1 {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto 30px;
}
section.main .img1 .pc {
	display: block;
	margin: 0 auto;
}
section.main .img1 a.sp {
	display: none;
}
section.main .img2 {
	width: 100%;
	max-width: 520px;
	margin: 0 auto 30px;
}
section.main h2 + p.channel,
section.main h2 + p.channel + .img2 {
	margin-bottom: 72px;
}
section.main h2 + p.partner {
	line-height: 1.8;
	margin-bottom: 100px;
}
section.main ul.banner {
	width: 100%;
	max-width: 900px;
	margin: 0 auto 60px;
	display: -webkit-flex;
	display: flex;
	text-align: center;
	-webkit-justify-content: center; /* Safari */
	flex-wrap: wrap;
	justify-content: center;
}
section.main ul.banner li {
	width: 280px;
	/* padding: 20px; */
	position:relative;
}
section.main ul.banner li a {
	display: block;
}/*
section.main ul.banner li:last-of-type {
    margin-left: auto;
}*/


/* animate */
#animation_container {
	position: relative;
	width: 100% !important;
	max-width: 800px;
	max-height: 524px;
	margin: 0 auto 80px;
	padding: 0 10px;
	overflow: hidden;
}
#animation_container #canvas {
	width: 100% !important;
	max-width: 800px;
	height: auto !important;
	max-height: 524px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 6px;
}

.mapBase {
  width: 100%;
  overflow: auto;
  margin-bottom: 20px;
  -webkit-overflow-scrolling: touch;
}
.mapArea {
	position:relative;
	width:100%;
	max-width:1500px;
	min-width: 800px;
	max-height:760px;
	min-height: 405px;
	margin: 0 auto;
	padding:0 20px;
	overflow: hidden;
}
#animation_container2 {
	width: 100% !important;
}
#animation_container2 #canvas2 {
    max-width: 100%;
    height: auto !important;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 900px) {
	section.main ul.banner li {
		width: 32%;
		margin-right: 2%;
	}
	section.main ul.banner li:nth-child(3n) {
		margin-right:0;
	}
}
@media screen and (max-width: 800px) {
	#animation_container2,#animation_container2 #canvas2 {
		width:800px !important;
		height:405px !important;
	}
}
@media screen and (max-width: 768px) {
	.toptxt br.sp {
		display: block;
	}
	section.main h2 + p {
		text-align: left;
		line-height: 1.8;
	}
	section.main h2 + p	br.pc {
		display: none;
	}
	section.main .img1 {
		max-width: 1200px;
	}
	section.main .img2 {
		max-width: 420px;
	}
	section.main h2 + p.partner {
		margin-bottom: 60px;
	}
}

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

	.mapBase {
		padding: 0 0 60px;
		background: url("/shr/img/common/icon_swipe.png") no-repeat center bottom;
		background-size: 75px auto;
	}

}

@media screen and (max-width: 550px) {
	br.sp {
		display: block;
	}
	br.pc {
		display: none;
	}
	section.main h2 {
		font-size: 2.4rem;
	}
	section.main h2 + p {
		margin-bottom: 40px;
	}
	.toptxt {
		font-size: 1.6rem;
		text-align: left;
		line-height: 2;
		margin-bottom: 35px;
	}
	.toptxt br.sp {
		display: none;
	}
	section.main .img1 + h2  {
		font-size: 5.5vw;
	}
	section.main .img1 .pc {
		display: none;
	}
	section.main .img1 a.sp {
		display: block;
	}
	section.main .img1 {
		margin: 0 auto 40px;
	}
	section.main h2 + p.channel,
	section.main h2 + p.channel + .img2,
	section.main h2 + p.partner {
		margin-bottom: 35px;
	}
	section.main .img2 {
		max-width: 240px;
	}
	section.main ul.banner {
		flex-flow: wrap;
	}
	section.main ul.banner {
		text-align: left;
		-webkit-justify-content: left; /* Safari */
		justify-content: left;
	}
	section.main ul.banner {
		display: block;
	}
	section.main ul.banner li {
		width: 49%;
		display: block;
		margin-right:0;
	}
	section.main ul.banner li:nth-child(odd) {
		padding: 10px 0;
		float: left;
	}
	section.main ul.banner li:nth-child(even) {
		padding: 10px 0;
		float: right;
	}
}