@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:#000;
	box-sizing:border-box;
	background:#fff
}


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

a:link{
  color: #fff;
  text-decoration: none;
}
a:visited{
  color: #fff;
  text-decoration: none;
}
a:hover{
  color: #fff;
  text-decoration: none;
	opacity:0.8;
}
a:active{
  color: #fff;
  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:#B7204C
}
.course02 nav li.current{
	background:#4888B7
}
.course03 nav li.current{
	background:#419665
}
#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:760px;
	line-height:760px;
	background:url(../img/top_bg_mainimage.jpg) repeat-x;*/
		position: relative;
		height: 0;
		/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
		padding-top: 50.66%;
		background:url(../img/top_bg_mainimage.jpg)  0 0 no-repeat;
		background-size: contain;
}

/* about */
.about{
	display:table;
	width:100%;
	height:100%;
}
.about .story{
	width:50%;
	height:100%;
	display:table-cell;
	position:relativee;
	background:#281A34;
}
.about .story .inner{
	position:relative;
	border:#938C99 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) {

/* about */
.about{
	display: block;
	height:auto;
}
.about .story{
	width:100%;
	height:auto;
	display: block;
	padding:25px;
}
.about .story .inner{
	position:relative;
	border:#938C99 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) {
/* 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%;
	}

	
}

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

#contents img{
	max-width:100%;
}
.btn-area{
	text-align:center;
}
.btn-back{
	display:block;
	color:#E6D833 !important;
	font-weight:700;
	font-size:120%;
	width:40%;
	padding:20px 40px;
	margin:70px auto;
	background:#000;
}

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

.ttl{
	position:absolute;
	top:26%;
	left:14%;
}
.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: 1300px) {
.ttl img{
	max-width: 70%;
}

}
@media screen and (max-width: 860px) {
.ttl {
	left: 5%;
}

}
@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;
	}
	
	.btn-back{
		width:80%;
		padding:20px 40px;
		margin:20px auto;
		font-size: 1.5rem;
	}

}

@media screen and (max-width: 600px) {
.ttl {
	left: -5%;
	top: 7%;
}
.ttl img{
	width: 75%;
}
	
	.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;
	}

	.btn-back{
		width:80%;
		padding:20px 40px;
		margin:20px auto;
		font-size: 1.3rem;
	}

}


/* --------------------------------------------------
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:flex-start;
	position:relative;
}
.course .txt{
	width:50%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	position:relative;
}
.course .txt div{
	position:relative;
	margin:25px 0 25px 25px;
}

.spot02-img {
	width: 100%;
}
.course .txt h3{
	max-width:70%;
	padding-top:50px;
	margin:60px auto;
	text-align: center;
}
.course .txt p{
	max-width:80%;
	margin: 0 auto 20px;
	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{
	width:50%;
	z-index:1;
	position:relative;
}

.course .pht img{
	width:100%;
}
.course .col-l .txt{
	order:1;
}
.course .col-l .pht{
	order:2;
}
.course .col-r .txt{
	order:2;
}
.course .col-r .pht{
	order:1;
}
.bgDark{
	background:#ECE7DB;
}
.bgBright{
	background:#F3F0E9;
}
.bg01 section,.bg04 section,.bg05 section,.bg06 section{
	width:80%;
	margin:0 auto;
}
.bg01{
	background:url(../img/spot01_bg.png) no-repeat #ECE7DB 50% 20%;
	padding:3% 0;
}
.bg02{
	background:url(../img/spot02_bg.png) no-repeat #F3F0E9 120% 2%;
	margin-top: -100px;
}
.bg03{
	background:url(../img/spot03_bg.png) no-repeat #ECE7DB 50% 20%;
	padding:0;
}
.bg04{
	background:url(../img/spot04_bg.png) no-repeat #F3F0E9 50% 20%;
	padding:3% 0;
}
.bg05{
	background:url(../img/spot05_bg.png) no-repeat #ECE7DB 50% 20%;
	padding:3% 0;
}
.bg06{
	background:url(../img/spot06_bg.png) no-repeat #F3F0E9 50% 20%;
	padding:3% 0;
	margin-top: -100px;
}
.way{
	text-align:center;
	margin-top:-7%;
}
.bg02 .pht p{
	padding: 5% 0 5% 25%;
}
.bg03 .txt p{
	margin-bottom:5%;
}
.bg03 .txt div .pht03{
	margin-left: 8%;
}
}
.bg05 .pht{
	margin-left:10%;
}


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

	.course section{
		width:100%;
		margin:0 auto;
		display:block;
		padding: 2% 0;
	}
	.course .txt{
		width:100%;
		display:block;
		padding:0;
	}
	.course .txt div{
		margin:0;
	}
	.course .txt h3{
		padding-top:0;
		margin:0 auto 15px;
	}
	.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:90%;
		margin: 0 auto 10px;
/*		font-size:1.6rem;
*/	}
	.bg02 .pht p {
		width: 90%;
		margin: 0 auto;
	}
	.course .txt .btn-more{
		font-size:100%;
		margin:60px auto;
	}
	
	.course .pht{
		width:100%;
	}
	.course .col-l .pht{
		margin-left:0;
	}
	.course .col-r .pht{
		margin-right:0;
	}
	.way{
		padding-bottom:7%;
	}
	.bg01 section,.bg04 section,.bg05 section,.bg06 section{
		width:100%;
		margin:0 auto;
	}

	.bg02 {
		margin-top: -50px;
	}
	.bg02 .pht p{
		padding: 10px 0;
	}
	
}

@media screen and (max-width: 600px) {
.course section{
		margin:0 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:90%;
		font-size:1.2rem;
		margin-bottom: 10px;
	}
	.course .txt .btn-more{
		font-size:80%;
		width:70%;
		margin:30px auto;
	}
	.course .pht{
		padding-top:0;
	}
	.way img{
		transform:scale3d(0.8,0.8,0.8);
	}
	.bg02 .pht p{
		font-size: 1.2rem;
		width: 90%;
		margin: 0 auto;
	}
	.bg06 {
	margin-top: -10px;
	}
	.bg02 {
		margin-top: 0;
		padding-top: 10px;
	}
.bg03 .txt div .pht03 {
		margin-left: 5%;
		margin-bottom: 10px;
		width: 90%;
		}

}

/* course01 */
.course01 .course{
	background:url(../img/course01_bg_course.jpg);
}
.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);
}
.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);
}
.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{
		position: relative;
		text-align:center;
		/*height: 0;*/
		/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
		/*padding-top: 72.8%;*/
		background: url(../img/map_bg.png)  0 0 no-repeat;
		background-size: contain;
		background-size: 100%;
		padding: 70px 0 100px;
}
.map p{
/*		position: absolute;
		left:0;
		right:0;
		top:10%;
		line-height:240%
*/}
.map .mapImg{
		/*position: absolute;
		left:0;
		right:0;
		bottom:10%;*/
		margin-top: 40px;
}

/* --------------------------------------------------
profile
-------------------------------------------------- */

.profile{
}
.profileImg img{
		width:100%;
		height:auto;

}
.profileTxt{
		color:#fff;
/*		position: relative;
*/		text-align:center;
/*		height: 0;
*/		/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
/*		padding-top: 31.3%;
*/		background: url(../img/profile_bg.png)  0 0 no-repeat #333;
		background-size: 100%;
}
.profileTxt p{
/*		position: absolute;
*/		width:62%;
		left:50%;
		margin: 0 auto;
/*		margin-left:-31%;
*/		top:12%;
/*		line-height:210%;
*/		text-align:left;
		padding: 10% 0;
}
.txtName{
		display:block;
		font-size:140%;
		margin-bottom:2%;
}
.txtSite{
		display:block;
		margin-top:2%;
}
@media screen and (max-width: 1300px) {

.map {
	padding: 50px 20px 50px 20px;
}
	.map p{
		font-size:1.6rem;
	}

.map .mapImg {
	width: 50%;
	margin: 0 auto;
}
}
@media screen and (max-width: 800px) {

	.map div{
		max-width:600px;
		margin:10% auto;
	}
	.map h3{
		font-size:150%;
		position: relative;
		margin-bottom:3%;
	}
}

@media screen and (max-width: 600px) {
.map{
		height: 600px;
		background-size: 100% 600px;
		padding: 20px 40px;
}
.map {
}
	.map p{
		font-size:1.1rem;
		line-height: 1.2;
	}
	.map .mapImg {
	width: 90%;
	margin: 0 auto;
}
.profileTxt p {
    width: 80%;
    margin: 0 auto;
    line-height: 1.2;
    text-align: left;
    padding: 10% 0;
	font-size: 1.2rem;
}
.txtName {
    font-size: 1.4rem;
}
}

@media screen and (max-width: 420px) {
.map{
		height: 350px;
		background-size: 100% 350px;
		padding: 30px 50px 20px;
}

	.map p{
		font-size:1.1rem;
		line-height: 1.2;
	}
	.map .mapImg {
	width: 90%;
	margin: 0 auto;
}
.profileTxt p {
    width: 80%;
    margin: 0 auto;
    line-height: 1.2;
    text-align: left;
    padding: 10% 0;
	font-size: 1.2rem;
}
.txtName {
    font-size: 1.4rem;
}
}

/* --------------------------------------------------
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); }
}