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

/* --------------------------------------------------
reset
-------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
	box-sizing:border-box;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

strong{
	font-weight:bold;
}

em{
	font-style:italic;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

img,a {
  vertical-align:top;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

*, *:before, *:after {
	box-sizing: border-box;
}

/* --------------------------------------------------
clearfix
-------------------------------------------------- */

.clearfix:after{
  content: "."; 
  display: block; 
  height: 0;
  font-size:0;   
  clear: both;
  visibility:hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display:block;}


/* --------------------------------------------------
html
-------------------------------------------------- */

html{
  font-size: 62.5%;
  height:100%;
}

/* --------------------------------------------------
body
-------------------------------------------------- */

body{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 1.8rem;
  line-height:1.6;
  -webkit-text-size-adjust: 100%;
  height:100%;
	color:#30302b;
	box-sizing:border-box;
	background:#E4E1B4;
}


/* --------------------------------------------------
link
-------------------------------------------------- */

a:link{
  color: #30302b;
  text-decoration: none;
}
a:visited{
  color: #30302b;
  text-decoration: none;
}
a:hover{
  color: #30302b;
  text-decoration: none;
	opacity:0.8;
}
a:active{
  color: #30302b;
  text-decoration: none;
}

/* --------------------------------------------------
header
-------------------------------------------------- */

#header{
	display:table;
	width:100%;
}
#header .logo{
	display:table-cell;
	width:50%;
	vertical-align:middle;
	padding:0 20px;
}
#header nav {
	display:table-cell;
	width:50%;
}
#header nav ul{
	display:table;
	width:100%;
}
#header nav li{
	display:table-cell;
	width:33.33%;
}
.course01 nav li.current{
	background:#e6ccd3
}
.course02 nav li.current{
	background:#ccd5db
}
.course03 nav li.current{
	background:#d2e0d8
}
#header nav a{
	display: block;
	padding:20px 0;
	text-align:center;
}

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

	#header{
		display:table;
		width:100%;
	}
	#header .logo{
		display:block;
		width:100%;
		vertical-align:middle;
		padding:20px;
		text-align:center;
	}
	#header nav {
		display:block;
		width:100%;
	}
	#header nav ul{
		display:table;
		width:100%;
	}
	#header nav li{
		display:table-cell;
		width:33.33%;
	}

}


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


	#header nav li{
		font-size:1rem;
	}
	#header .logo{
		padding:10px;
	}
	#header .logo img{
		transform:scale3d(0.8,0.8,0.8);
	}

}

/* --------------------------------------------------

top
	
-------------------------------------------------- */

/* mainimage */
.mainimage{
	width:100%;
	height:810px;
	line-height:810px;
	background:url(../img/top_bg_mainimage.jpg) repeat-x;
}
.mainimage img{
	vertical-align:middle;
}

/* about */
.about{
	display:table;
	width:100%;
	height:100%;
}
.about .story{
	width:50%;
	height:100%;
	display:table-cell;
	position:relative;
	background:#fff;
}
.about .story .inner{
	position:relative;
	border:#817A45 solid 1px;
	height:calc(100% - 50px);
	box-sizing:border-box;
	margin:25px;
	padding:10%;
}
.about .story h3{
	text-align:center;
	margin-bottom:10%;
}
.about .pht{
	width:50%;
	display:table-cell;
	text-align: right;
	vertical-align:top;
	background:url(../img/top_bg_soseki.jpg) repeat-x;
	background-size: cover;
}
.about .pht img{
	width:100%;
}

/* select-course */
.select-course{
	text-align:center;
	padding:3%;
}
.select-course ul{
	width:100%;
	max-width:1080px;
	margin:0 auto;
	position:relative;
	overflow: hidden;
}
.select-course li{
	float:left;
	width:33.33%;
	padding:20px;
}
.select-course li a{
	transition: margin-top .5s ease;
	display:block;
	margin-top:20px;
	text-align:center;
	width:100%;
}
.select-course li a:hover{
	margin-top:10px;
}



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

/* mainimage */
.mainimage{
	height:700px;
	line-height:700px;
	background-size:cover;
}
.mainimage img{
	vertical-align:middle;
	transform:scale3d(0.7,0.7,0.7);
}

/* about */
.about{
	display: block;
	height:auto;
}
.about .story{
	width:100%;
	height:auto;
	display: block;
	padding:25px;
}
.about .story .inner{
	position:relative;
	border:#c9b08d solid 1px;
	height:calc(100% - 50px);
	box-sizing:border-box;
	margin:0;
	padding:10%;
}
.about .pht{
	width:100%;
	height:700px;
	display: block;
}

/* select-course */
.select-course li{
	float:none;
	width:50%;
	padding:10px;
}
.select-course li a{
	transition:none;
	margin-top:0;
}
.select-course li a:hover{
	margin-top:0;
}

}

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


	/* mainimage */
	.mainimage{
		height:500px;
		line-height:500px;
		background-size:cover;
	}
	.mainimage img{
		vertical-align:middle;
		transform:scale3d(0.5,0.5,0.5);
		margin-top:-60px;
	}
	
	/* about */
	.about .story img{
		vertical-align:middle;
		transform:scale3d(0.8,0.8,0.8);
	}
	
	/* select-course */
	.select-course{
		text-align:center;
		padding:3%;
	}
	.select-course ul{
		display:table;
		width:100%;
		max-width:1080px;
		margin:0 auto;
	}
	.select-course li{
		padding:10px;
		display:table-cell;
	}
	.about .story p{
		font-size:1.1rem;
	}
	.about .pht{
		width:100%;
		height:50vh;
		display: block;
	}
	
	/* select-course */
	.select-course{
		text-align:center;
		padding:3%;
	}
	.select-course ul{
		display:block;
		width:100%;
		margin:0 auto;
	}
	.select-course li{
		display:inline-block;
		width:48%;
	}

	
}


/* --------------------------------------------------

course
	
-------------------------------------------------- */


/* --------------------------------------------------
contents
-------------------------------------------------- */

#contents img{
	max-width:100%;
}
.btn-area{
	text-align:center;
	padding: 3%;
}
.btn-back{
	display:block;
	color:#4b4609;
	font-weight:700;
	font-size:120%;
	width:40%;
	padding:10px 40px;
	margin:70px auto;
	border:#4b4609 solid 1px;
}

@media screen and (max-width: 600px) {
.btn-back{
	width:100%;
}

}

/* --------------------------------------------------
ttl
-------------------------------------------------- */

.ttl{
	text-align:center;
	position:relative;
}
.course01 .ttl{
	background:url(../img/course01_bg_ttl.png) repeat-x;
	height:425px;
	line-height:425px;
	vertical-align:middle;
}
.course02 .ttl{
	background:url(../img/course02_bg_ttl.png) repeat-x;
	height:425px;
	line-height:425px;
	vertical-align:middle;
}
.course03 .ttl{
	background:url(../img/course03_bg_ttl.png) repeat-x;
	height:425px;
	line-height:425px;
	vertical-align:middle;
}

.course01 .ttl span,
.course02 .ttl span,
.course03 .ttl span{
	position:absolute;
	padding-left:50px;
}
.course01 .ttl img,
.course02 .ttl img,
.course03 .ttl img{
	vertical-align:middle;
}

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

	.ttl img{
		transform:scale3d(0.8,0.8,0.8);
	}
	.course01 .ttl span,
	.course02 .ttl span,
	.course03 .ttl span{
		padding-left:0;
		padding-right:50px;
	}

}

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

	.ttl img{
		height:250px;
		line-height:250px;
	}
	.ttl span img{
		transform:scale3d(0.6,0.6,0.6);
	}
	.course01 .ttl{
		background:url(../img/course01_bg_ttl.png) repeat-x;
		background-size: cover;
		height: 250px;
		line-height:250px;
	}
	.course02 .ttl{
		background:url(../img/course02_bg_ttl.png) repeat-x;
		background-size: cover;
		height: 250px;
		line-height:250px;
	}
	.course03 .ttl{
		background:url(../img/course03_bg_ttl.png) repeat-x;
		background-size: cover;
		height: 250px;
		line-height:250px;
	}
	
	.course01 .ttl span,
	.course02 .ttl span{
		position:absolute;
		right:-40px;
		top:0;
	}
	.course03 .ttl span{
		position:absolute;
		right:-60px;
		top:0;
	}

}


/* --------------------------------------------------
intro
-------------------------------------------------- */

.intro{
	max-width:1080px;
	margin:0 auto;
	text-align:center;
	padding:80px 0;
	position:relative;
}
.course01 .intro .route,
.course02 .intro .route{
	padding-left:50%;
}
.course01 .intro .pht,
.course02 .intro .pht{
	max-width:50%;
	position:absolute;
	left:0;
	bottom:-10%;
	padding:10px;
}
.course03 .intro .pht{
	position:absolute;
	left:3%;
	top:-60%;
	padding:10px;
}

@media screen and (max-width: 800px) {
	
	.intro{
		max-width:750px;
		padding:60px 0;
	}
	.course01 .intro .route,
	.course02 .intro .route{
		padding-left:40%;
	}
	.course01 .intro .route img,
	.course02 .intro .route img{
		transform:scale3d(0.8,0.8,0.8);
	}
	.course03 .intro .route img{
		transform:scale3d(0.9,0.9,0.9);
	}
	.course01 .intro .pht,
	.course02 .intro .pht{
		max-width:50%;
		z-index:1;
		top:-60%;
	}
	.course03 .intro .pht{
		max-width:90%;
		z-index:1;
		top:-55%;
	}

}

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

	.intro{
		max-width:100%;
		padding:40px 0;
	}
	.course01 .intro .route,
	.course02 .intro .route{
		padding-left:0;
	}
	.course01 .intro .pht,
	.course02 .intro .pht,
	.course03 .intro .pht{
		display:none;
	}

}

/* --------------------------------------------------
course
-------------------------------------------------- */

.course{
	padding:3%;
}
.course section{
	max-width:1280px;
	margin:3% auto 10% auto;
	display:flex;
	align-items:center;
	position:relative;
}
.course .txt{
	width:55%;
	background:#E4E1B4;
	display:flex;
	flex-direction:column;
	justify-content:center;
	position:relative;
}
.course .txt div{
	position:relative;
	border:#4b4609 solid 1px;
	margin:25px;
}
.course .txt div::after{
	content:"";
	width:10px;
	height:103px;
	background:#090;
	position:absolute;
	left:50%;
	top:-99px;
	background:url(../img/pct_line.png) no-repeat center top;
	margin-left:-5px;
}
.course .txt div::before{
	content:"";
	width:10px;
	height:103px;
	background:#090;
	position:absolute;
	left:50%;
	bottom:-99px;
	background:url(../img/pct_line.png) no-repeat center top;
	margin-left:-5px;
}
.course .txt h3{
	max-width:70%;
	text-align:center;
	padding-top:100px;
	margin:80px auto;
}
.course .spot01 .txt h3{
	background: url(../img/icon_spot01.png) no-repeat center top;
}
.course .spot02 .txt h3{
	background: url(../img/icon_spot02.png) no-repeat center top;
}
.course .spot03 .txt h3{
	background: url(../img/icon_spot03.png) no-repeat center top;
}
.course .spot04 .txt h3{
	background: url(../img/icon_spot04.png) no-repeat center top;
}
.course .spot05 .txt h3{
	background: url(../img/icon_spot05.png) no-repeat center top;
}
.course .spot06 .txt h3{
	background: url(../img/icon_spot06.png) no-repeat center top;
}

.course .txt p{
	max-width:70%;
	margin: 0 auto;
	text-align: justify;
}
.course .txt .btn-more{
	display:block;
	background:#FFF url(../img/bg_arrow.png) no-repeat 90% 50%;
	color:#37283B;
	font-weight:700;
	font-size:120%;
	width:40%;
	padding:10px 40px;
	margin:70px auto;
}
.course .pht{
	max-width:53%;
	z-index:1;
	position:relative;
}
.course .col-l .txt{
	order:1;
}
.course .col-l .pht{
	order:2;
	margin-left:-3%;
}
.course .col-r .txt{
	order:2;
}
.course .col-r .pht{
	order:1;
	margin-right:-3%;
}
.way{
	text-align:center;
	margin-top:-7%;
}


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

	.course section{
		max-width:600px;
		margin:10% auto;
		display:block;
	}
	.course .txt{
		width:100%;
		display:block;
		padding:15px;
	}
	.course .txt div{
		margin:0;
	}
	.course .txt h3{
		padding-top:80px;
		margin:60px auto;
	}
	.course .txt h3 img{
		transform:scale3d(0.8,0.8,0.8);
	}
	.course .spot01 .txt h3{
		background-size:auto 50px;
	}
	.course .spot02 .txt h3{
		background-size:auto 50px;
	}
	.course .spot03 .txt h3{
		background-size:auto 50px;
	}
	.course .spot04 .txt h3{
		background-size:auto 50px;
	}
	.course .spot05 .txt h3{
		background-size:auto 50px;
	}
	.course .spot06 .txt h3{
		background-size:auto 50px;
	}
	.course .txt p{
		max-width:80%;
		font-size:1.6rem;
	}
	.course .txt .btn-more{
		font-size:100%;
		margin:60px auto;
	}
	.course .pht{
		max-width:100%;
		padding-top:100px;
	}
	.course .col-l .pht{
		margin-left:0;
	}
	.course .col-r .pht{
		margin-right:0;
	}
	.way{
		padding-bottom:7%;
	}
	
}

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

	.course{
		padding:5%;
	}
	.course section{
		margin:0 auto;
	}
	.course .txt h3{
		padding-top:60px;
		margin:30px auto;
	}
	.course .txt h3 img{
		max-height: 25px;
	}
	.course .txt div::after{
		content:none;
	}
	.course .txt div::before{
		content:none;
	}
	.course .spot01 .txt h3{
		background-size:auto 40px;
	}
	.course .spot02 .txt h3{
		background-size:auto 40px;
	}
	.course .spot03 .txt h3{
		background-size:auto 40px;
	}
	.course .spot04 .txt h3{
		background-size:auto 40px;
	}
	.course .spot05 .txt h3{
		background-size:auto 40px;
	}
	.course .spot06 .txt h3{
		background-size:auto 40px;
	}
	.course .txt p{
		max-width:70%;
		font-size:1.2rem;
	}
	.course .txt .btn-more{
		font-size:80%;
		width:70%;
		margin:30px auto;
	}
	.course .pht{
		padding-top:20px;
		margin-bottom:20%;
	}
	.way img{
		transform:scale3d(0.8,0.8,0.8);
	}

}

/* course01 */
.course01 .course{
	background:url(../img/course01_bg_course.jpg);
	/* background: #fff; */
}
.course01 .course .txt::before{
	content:"";
	width:439px;
	height:30px;
	position:absolute;
	top:120px;
	left:50%;
	margin-left:-219px;
	background: url(../img/course01_bg_spot.png) no-repeat center top;
}
.course01 .course .col-l .pht::after{
	content:"";
	width:341px;
	height:191px;
	position:absolute;
	right:0;
	top:-50%;
	background:url(../img/course01_pct_tree.png) no-repeat center top;
}
.course01 .course .col-r .pht::after{
	content:"";
	width:341px;
	height:191px;
	position:absolute;
	left:0;
	top:-30%;
	background:url(../img/course01_pct_tree.png) no-repeat center top;
}
.course01 .course .spot01 .txt::after{
	content:"";
	width:87px;
	height:113px;
	position:absolute;
	right:-40px;
	top:-50px;
	background:url(../img/course01_pct_bird01.png) no-repeat center top;
}
.course01 .course .spot02 .txt::after{
	content:"";
	width:97px;
	height:79px;
	position:absolute;
	left:50%;
	top:-30%;
	background:url(../img/course01_pct_bird02.png) no-repeat center top;
}
.course01 .course .spot03 .txt::after{
	content:"";
	width:126px;
	height:75px;
	position:absolute;
	left:50%;
	top:-140px;
	margin-left:-90px;
	background:url(../img/course01_pct_bird03.png) no-repeat center top;
}

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


	/* course01 */
	.course01 .course{
		background-size: contain;
	}
	.course01 .course .txt::before{
		width:200px;
		top:70px;
		margin-left:-100px;
		background-size:200px auto;
	}
	.course01 .course .col-l .pht::after{
		width:100px;
		top:auto;
		bottom:-80%;
		background-size:100px auto;
	}
	.course01 .course .col-r .pht::after{
		width:100px;
		top:auto;
		bottom:-80%;
		background-size:100px auto;
	}
	.course01 .course .spot01 .txt::after{
		width:50px;
		right:0;
		top:-40px;
		background-size:50px auto;
	}
	.course01 .course .spot02 .txt::after{
		width:60px;
		left:15%;
		top:-10%;
		background-size:60px auto;
	}
	.course01 .course .spot03 .txt::after{
		width:70px;
		left:auto;
		right:0;
		top:-30px;
		margin-left:-90px;
		background-size:70px auto;
	}


}

/* course02 */
.course02 .course{
	background:url(../img/course02_bg_course.jpg);
	/* background: #fff; */
}
.course02 .course .col-l .txt::before{
	content:"";
	width:98px;
	height:160px;
	position:absolute;
	left:35px;
	bottom:25px;
	background:url(../img/course02_bg_spot_l.png) no-repeat center top;
}
.course02 .course .col-r .txt::before{
	content:"";
	width:98px;
	height:160px;
	position:absolute;
	right:35px;
	bottom:25px;
	background:url(../img/course02_bg_spot_r.png) no-repeat center top;
}
.course02 .course .col-l .txt::after{
	content:"";
	width:149px;
	height:85px;
	position:absolute;
	left:20%;
	bottom:-25%;
	background:url(../img/course02_pct_fish_l.png) no-repeat center top;
}
.course02 .course .col-l .pht::before{
	content:"";
	width:341px;
	height:191px;
	position:absolute;
	left:50%;
	bottom:-45%;
	background:url(../img/course02_pct_bl_r.png) no-repeat center top;
}
.course02 .course .col-r .pht::before{
	content:"";
	width:341px;
	height:191px;
	position:absolute;
	left:20%;
	bottom:-45%;
	background:url(../img/course02_pct_bl_l.png) no-repeat center top;
}
.course02 .course .col-l .pht::after{
	content:"";
	width:135px;
	height:82px;
	position:absolute;
	right:25px;
	top:-30%;
	background:url(../img/course02_pct_fish_r.png) no-repeat center top;
}

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

	/* course02 */
	.course02 .course{
		background-size: contain;
	}
	.course02 .course .col-l .txt::before{
		width:50px;
		left:10px;
		bottom:-60px;
		background-size:50px auto;
	}
	.course02 .course .col-r .txt::before{
		width:50px;
		right:10px;
		bottom:-60px;
		background-size:50px auto;
	}
	.course02 .course .col-l .txt::after{
		width:100px;
		bottom:auto;
		top:-195%;
		left:10%;
		background-size:100px auto;
	}
	.course02 .course .col-l .pht::before{
		width:100px;
		bottom:-80%;
		left:auto;
		right:5%;
		background-size:100px auto;
	}
	.course02 .course .col-r .pht::before{
		width:150px;
		bottom:-75%;
		left:10%;
		background-size:150px auto;
	}
	.course02 .course .col-l .pht::after{
		width:100px;
		top:-150%;
		background-size:100px auto;
	}

}

/* course03 */
.course03 .course{
	background:url(../img/course03_bg_course.jpg);
	/* background: #fff; */
}
.course03 .course .txt::before{
	content:"";
	width:300px;
	height:71px;
	position:absolute;
	top:90px;
	left:50%;
	margin-left:-150px;
	background: url(../img/course03_bg_spot.png) no-repeat top center;
}
.course03 .course .col-l .txt::after{
	content:"";
	width:341px;
	height:191px;
	position:absolute;
	left:0;
	bottom:-30%;
	background:url(../img/course03_pct_leaf01.png) no-repeat center top;
}
.course03 .course .col-r .txt::after{
	content:"";
	width:341px;
	height:191px;
	position:absolute;
	right:0;
	bottom:-30%;
	background:url(../img/course03_pct_leaf02.png) no-repeat center top;
}
.course03 .course .col-l .pht::before{
	content:"";
	width:341px;
	height:191px;
	position:absolute;
	right:0;
	bottom:-50%;
	background:url(../img/course03_pct_leaf03.png) no-repeat center top;
}
.course03 .course .col-r .pht::before{
	content:"";
	width:341px;
	height:191px;
	position:absolute;
	left:0;
	bottom:-45%;
	background:url(../img/course03_pct_leaf04.png) no-repeat center top;
}

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

	/* course03 */
	.course03 .course{
		background-size: contain;
	}
	.course03 .course .txt::before{
		width:200px;
		top:50px;
		margin-left:-100px;
		background-size:200px auto;
	}
	.course03 .course .col-l .txt::after{
		width:100px;
		bottom:-27%;
		background-size:100px auto;
	}
	.course03 .course .col-r .txt::after{
		width:80px;
		bottom:-20%;
		background-size:80px auto;
	}
	.course03 .course .col-l .pht::before{
		width:80px;
		bottom:-70%;
		background-size:80px auto;
	}
	.course03 .course .col-r .pht::before{
		width:80px;
		bottom:-70%;
		background-size:80px auto;
	}
	
}


/* --------------------------------------------------
map
-------------------------------------------------- */

.map{
	text-align:center;
	background:#f2f1ea;
	padding:3%;
}
.map h3{
	font-size:250%;
	position: relative;
	margin-bottom:3%;
}
.map h3::before{
	content:"";
	width:100px;
	height:3px;
	background:#868549;
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-50px;
}
.map .col2-btn{
	display: flex;
	align-items: stretch;
	justify-content: space-around;
}
.map .col2-btn .btn-area{
    color: #4b4609;
    font-weight: 700;
    font-size: 100%;
    width: 45%;
    margin: 40px auto;
	display: flex;
	text-align: center;
}
.map .col2-btn a{
	display: block;
    width: 100%;
    color: #4b4609;
    font-weight: 700;
    padding: 10px 20px;
    border: #4b4609 solid 1px;
	display: flex;
	align-items: center;
	justify-content: center;
}


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

	.map div{
		max-width:600px;
		margin:10% auto;
	}
	.map h3{
		font-size:150%;
		position: relative;
		margin-bottom:3%;
	}
	.map .col2-btn{
		flex-wrap: wrap;
	}
	.map .col2-btn .btn-area{
		width: 100%;
    margin: 20px auto;
	}
}

/* --------------------------------------------------
movie
-------------------------------------------------- */

.movie{
	text-align:center;
	background:#f2f1ea;
	padding:3%;
	padding-bottom: 4em;
}
.movie h3{
	font-size:250%;
	position: relative;
	margin-bottom:3%;
}
.movie h3::before{
	content:"";
	width:100px;
	height:3px;
	background:#868549;
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-50px;
}
.movie .col5-flex{
	display: flex;
	align-items: stretch;
	justify-content: space-around;
}
.movie .col5-flex li{
	width: 23%;
}
.movie .col5-flex a{
	display: block;
    width: 100%;
    color: #4b4609;
    font-weight: 700;
    padding: 10px 20px;
	align-items: center;
}
.movie .col5-flex a >p{
	margin-top: 0.7em;
}


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

	.map div{
		max-width:600px;
		margin:10% auto;
	}
	.map h3{
		font-size:150%;
		position: relative;
		margin-bottom:3%;
	}
	.map .col2-btn{
		flex-wrap: wrap;
	}
	.map .col2-btn .btn-area{
		width: 100%;
    margin: 20px auto;
	}
	.movie h3{
		font-size:150%;
		position: relative;
		margin-bottom:10%;
	}
.movie .col5-flex{
	flex-wrap: wrap;

}
.movie .col5-flex li{
	width: 48%;
}
.movie .col5-flex a{
    padding: 5px 10px;
	margin-bottom: 1.5em;
}
}

/* --------------------------------------------------
footer
-------------------------------------------------- */

.copyright{
	font-size:1rem;
	text-align:center;
	padding:3rem 0;
	letter-spacing:.2rem;
}

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

	.copyright{
		font-size:.9rem;
		padding:1rem 0;
		letter-spacing:.1rem;
	}

}



/* --------------------------------------------------
animation for PC
-------------------------------------------------- */

@media screen and (min-width: 1080px) {


	
	/* --------------------------------------------------
	js-style
	-------------------------------------------------- */
	
	.fx-col-in li{
		opacity:0;
	}
	
	.fx-in,
	.fx-down,
	.fx-up,
	.fx-left,
	.fx-right{
		visibility:hidden;
	}

	/* --------------------------------------------------
	body
	-------------------------------------------------- */
	
	body {
		animation: fadeBody 2s ease 0s 1 normal;
		-webkit-animation: fadeBody 2s ease 0s 1 normal;
	}
	
	@keyframes fadeBody {
		0% {opacity: 0}
		100% {opacity: 1}
	}
	
	@-webkit-keyframes fadeBody {
		0% {opacity: 0}
		100% {opacity: 1}
	}
	


}

/* --------------------------------------------------
animate
-------------------------------------------------- */


.fadeIn {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 -ms-animation-duration:2s;
 animation-duration:2s;
 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;
 visibility: visible !important;
}
@-webkit-keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}
@keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}


.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


.fadeInUp {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;
 visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


.fadeInLeft {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInLeft;
 animation-name: fadeInLeft;
 visibility: visible !important;
}
@-webkit-keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}


.fadeInRight {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInRight;
 animation-name: fadeInRight;
 visibility: visible !important;
}
@-webkit-keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(-20px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}

.fx-swing {
		-moz-animation: swing linear 2s infinite;
		-moz-transform-origin: center -5px 0;
		-webkit-animation: swing linear 2s infinite;
		-webkit-transform-origin: center -5px 0;
		-ms-animation: swing linear 2s infinite;
		-ms-transform-origin: center -5px 0;
		-o-animation: swing linear 2s infinite;
		-o-transform-origin:center -5px 0;
		animation: swing linear 2s infinite;
		transform-origin: center 70% 0;
}

@-moz-keyframes swing { 
		0% { -moz-transform: rotate(0deg) }
		25% { -moz-transform: rotate(2deg); }
		50% { -moz-transform: rotate(0deg); }
		75% { -moz-transform: rotate(-2deg); }
		100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes swing { 
		0% { -webkit-transform: rotate(0deg); }
		25% { -webkit-transform: rotate(2deg); }
		50% { -webkit-transform: rotate(0deg); }
		75% { -webkit-transform: rotate(-2deg); }
		100% { -webkit-transform: rotate(0deg); }
}    
@-o-keyframes swing { 
		0% { -o-transform: rotate(0deg); }
		25% { -o-transform: rotate(2deg); }
		50% { -o-transform: rotate(0deg); }
		75% { -o-transform: rotate(-2deg); }
		100% { -o-transform: rotate(0deg); }
}
@-ms-keyframes swing { 
		0% { -ms-transform: rotate(0deg); }
		25% { -ms-transform: rotate(2deg); }
		50% { -ms-transform: rotate(0deg); }
		75% { -ms-transform: rotate(-2deg); }
		100% { -ms-transform: rotate(0deg); }
}
@keyframes swing { 
		0% { transform: rotate(0deg); }
		25% { transform: rotate(2deg); }
		50% { transform: rotate(0deg); }
		75% { transform: rotate(-2deg); }
		100% { transform: rotate(0deg); }
}