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


/* import style
------------------------------------------------------------------- */
@import url('/css/mod_default.css');
@import url('/css/mod_layout.css');
@import url('/css/mod_headerfooter.css');
@import url('/css/mod_common.css');
@import url('/css/mod_others.css');


/* body
---------------------------------------------------------------------- */
body{
	color: #333;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	font-weight: normal;
}

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

#footerArea {
	width: 830px;
	margin: 0 auto;
	background-image:none; background-color:#f6f6f6;
	-webkit-border-radius: 5px;  /* Safari,Google Chrome */
	-moz-border-radius: 5px;      /* Firefox12まで */
	border-radius: 5px;           /* Firefox13以降 */
}

.btnList{ margin: 0 auto; }

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

/*　ガイド03　－　初心者用ｙロードマップ
------------------------------------------- */

#guide03{
	position: relative;
	background: url(/image/guide/03/cloud.png) repeat center top #a6e4e9;
	width: 100%;
	min-width: 1000px;
	margin: 0 auto;
	padding-top:30px;
}

#guide03_box{
	position: relative;
	background: url(/image/guide/03/bg.png) repeat center top #fefbf3;
	width: 988px;
	height: 100%;
	margin: 0 auto ;
	-moz-border-radius:16px;
	-webkit-border-radius:16px;
	border-radius:16px;
	border: solid 3px #e6e2cd;
	-webkit-box-shadow:0px 0px 0px 3px #fff;
	box-shadow:0px 0px 0px 3px #fff;
	overflow:hidden;
}

#guide03 hr{
	border: none;
	width: 100%;
	height: 10px;
	background: url(/image/guide/03/hr.png) no-repeat center;
}

#guide03 a{
	display:inline-block;
	transition: 0.6s ;
}

#guide03 a:hover{
	opacity: 0.6;
}

/* ページトップへ戻る */
#guide03 .pageTopGuide{
	position: relative;
    width: 100%;
    max-width: 1000px;
    height: 0;
    margin: 0 auto;
}
	
#guide03 .pageTopGuide a{
	left: auto;
	display: block;	
	margin-left: 960px;
	margin-top: 0;
	padding:1em 0 0 2px;
	z-index:800;
    animation:
	moveY 2s ease-in-out infinite alternate;
}

@keyframes moveY {
	0% {margin-bottom: -20px}	
	100% {margin-bottom: 20px}
}

#guide03 .header00{
	display: block;
	background: url(/image/guide/03/header00.png) no-repeat center #655f5d;
	height: 36px;
	text-indent:100%;
	white-space:nowrap;
}

#guide03 h2{
	background: url(/image/guide/03/title.png) no-repeat center;
	margin-top: 32px;
	margin-bottom: 48px;
	height: 64px;
	text-indent:100%;
	white-space:nowrap;
}

#guide03 .menu{
	background: url(/image/guide/03/island.png) no-repeat 570px top;
	margin-bottom: 30px;
}

#guide03 .menu li{
	padding-left: 120px;
	height: 48px;
}

#guide03 ul.column3{
	width: 960px;
	margin: 16px auto;
	text-align: center;
}

#guide03 ul.column3 li{
	width: 300px;
	display: inline-block;
	text-align: center;
}

#guide03 #guide01 {
	margin-top: 32px;
	margin-bottom: 48px;
}

#guide03 #guide01 h3{
	background: url(/image/guide/03/header01.png) no-repeat center;
	height: 184px;
	text-indent:100%;
	white-space:nowrap;
}

#guide03 div[id^="lookAreaGuide01_"]{
	position: relative;
	display: none;
	width: 894px;
	height: 426px;
	margin: 0 auto;
	padding-left: 460px;
	padding-top: 288px;
	box-sizing: border-box;
}

#guide03 #guide01.pop-01-open #lookAreaGuide01_1{ display: block;}
#guide03 #guide01.pop-02-open #lookAreaGuide01_2{ display: block;}
#guide03 #guide01.pop-03-open #lookAreaGuide01_3{ display: block;}
#guide03 #guide01.pop-04-open #lookAreaGuide01_4{ display: block;}
#guide03 #guide01.pop-05-open #lookAreaGuide01_5{ display: block;}
#guide03 #guide01.pop-06-open #lookAreaGuide01_6{ display: block;}

#guide03 div[id^="lookAreaGuide01_"] a{
	margin-bottom: 12px;
}

#guide03 #lookAreaGuide01_1{ background: url(/image/guide/03/window01.png) no-repeat center;}
#guide03 #lookAreaGuide01_2{ background: url(/image/guide/03/window02.png) no-repeat center;}
#guide03 #lookAreaGuide01_3{ background: url(/image/guide/03/window03.png) no-repeat center;}
#guide03 #lookAreaGuide01_4{ background: url(/image/guide/03/window04.png) no-repeat center;}
#guide03 #lookAreaGuide01_5{ background: url(/image/guide/03/window05.png) no-repeat center;}
#guide03 #lookAreaGuide01_6{ background: url(/image/guide/03/window07.png) no-repeat center;}

#guide03 div[id^="lookAreaGuide01_"]  a[class^="btn-open"] {
	position: absolute;
	right: 18px;
	top: 36px;
}

#guide03 #tips01{
	width: 100%;
	background: url(/image/guide/03/img02.png) no-repeat center;
	height: 430px;
	margin: 48px auto;
	text-indent:100%;
	white-space:nowrap;
}

#guide03 #guide02 h3{
	background: url(/image/guide/03/header03.png) no-repeat center;
	margin-top: 32px;
	height: 184px;
	text-indent:100%;
	white-space:nowrap;
}

#guide03 #guide02 ul li{
	position: relative;
	height: 280px;
	margin-bottom: 24px;
}

#guide03 #guide02 ul li a{
	position: absolute;
	bottom: 0;
	left: 34px;
}

#guide03 #guide02 .guide02_1{ background: url(/image/guide/03/img03-1.png) no-repeat center top;}
#guide03 #guide02 .guide02_2{ background: url(/image/guide/03/img03-2.png) no-repeat center top;}
#guide03 #guide02 .guide02_3{ background: url(/image/guide/03/img03-3.png) no-repeat center top;}
#guide03 #guide02 .guide02_4{ background: url(/image/guide/03/img03-4.png) no-repeat center top;}
#guide03 #guide02 .guide02_5{ background: url(/image/guide/03/img03-5.png) no-repeat center top;}
#guide03 #guide02 .guide02_6{ background: url(/image/guide/03/img03-6.png) no-repeat center top;}


#guide03 #recommend01{
	background: url(/image/guide/03/img04-4.png) no-repeat center 370px;
	height: 580px;
}

#guide03 #recommend01 h3{
	background: url(/image/guide/03/header04.png) no-repeat center;
	margin-top: 32px;
	height: 75px;
	text-indent:100%;
	white-space:nowrap;
}

#guide03 #recommend01 li{
	background: url(/image/guide/03/img04-1.png) no-repeat center;
	height: 262px;
	text-indent:100%;
	white-space:nowrap;
	overflow: hidden;
}

#guide03 #recommend01 .guide03_2{ background: url(/image/guide/03/img04-2.png) no-repeat center top;}
#guide03 #recommend01 .guide03_3{ background: url(/image/guide/03/img04-3.png) no-repeat center top;}

#guide03 #recommend01 a{margin: 0 16px;}
#guide03 #recommend01 .btnArea {text-align: center; margin-top: 120px; margin-bottom: 80px;}

#guide03 #recommend02 h3{
	background: url(/image/guide/03/header05.png) no-repeat center;
	margin-top: 32px;
	height: 180px;
	text-indent:100%;
	white-space:nowrap;
}

#guide03 #recommend02 {
	position: relative;
	margin-bottom: 40px;
}

#guide03 #recommend02 .recommend02_main{
	position: relative;
	background: url(/image/guide/03/img05-1.png) no-repeat center;
	height: 280px;
}

#guide03 #recommend02 a{
	position: absolute;
    top: 231px;
    left: 151px;
}

#guide03 #recommend02 .recommend02_pr07{
	position: relative;
	background: url(/image/guide/03/img05-2.png) no-repeat center;
	height: 390px;
}

#guide03 #recommend02 .recommend02_pr07 a{
    top: 68px;
    left: 184px;
}

#guide03 #recommend02 .recommend02_pr07 a:hover{
	opacity: 1;
	box-shadow:0px 0px 0px 3px #ff3;
	border-radius: 4px;
}

#guide03 .zimu_box{
	position: relative;
	margin: 0 auto;
	height: 0;
	width: 1000px;
}

#guide03 .zimu{
	position: absolute;
	margin: 0 auto;
	bottom: -146px;
	background: url(/image/guide/03/img05-3.png) no-repeat 300px top;
	height: 240px;
	width: 1000px
}

#guide03 .zimu a{
	position: absolute;
	left: 340px;
	top: 104px;
}

#guide03 .zimu a.help{
    left: 512px;
    top: 82px;
}

#guide03 .zimu a.town{
	left: 452px;
}

#guide03::before{
	content: "";
	width: 100%;
	height: 171px;
	position: absolute;
	bottom: 0;
	background: url(/image/guide/03/bottom.png) no-repeat center bottom;
}

#guide03_bottom{
    border-bottom: 130px solid #7faf57;
    box-sizing: border-box;
}