/* ================================================================
( ・∋ 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-style:normal; font-size: 100%; vertical-align: baseline;}

html,body { width:100%; height:100%;}

/* ================================================================
( ・∋ Base
================================================================ */
body {font-size: 16px;line-height:30px; color:#FFF; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	overflow-x:hidden;}
img { border:none; outline:none; vertical-align:bottom;}
ol, ul{ list-style:none;}
caption, th{ text-align: left;}
a:focus { outline:none;}

a{ color:#fff; text-decoration:none;}
a:visited{ color:#fff;}
a:hover{ color:#fff; text-decoration:underline;}

a.opacity img:hover {opacity: 0.6;transition: 0.3s;}

.clear{clear:both;	}
.left{ text-align:left;}
.right{ text-align:right;}
.center {text-align:center;}
.f_left{float:left;}
.f_right{float:right;}

.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after { clear: both;}

h1{float:left; margin:0 60px 0 0;}
p.tel{float:left;}
h3{margin:0 0 30px 0;}
p{text-shadow:1px 1px 1px #000,-1px -1px 1px #000,1px -1px 1px #000,-1px 1px 1px #000;}

table{ width:100%; border-collapse:collapse; border-top:#FFF solid 1px; border-left:#FFF solid 1px; margin:0 0 10px 0;}
td,th{padding:10px; border-right:#FFF solid 1px; border-bottom:#FFF solid 1px; background:rgba(0,0,0,0.3);}

header{ background:#FFF;width:100%;height:140px; margin:0; padding:0; position:relative; text-align:center; z-index:10;}
header .h_wrap{width:1000px; margin:0 auto; padding:30px 0 0 0; text-align:left;}
@keyframes yurayura {
		0% { transform: rotate(0deg); }
		25% { transform: rotate(15deg); }
		50% { transform: rotate(0deg); }
		75% { transform: rotate(-15deg); }
		100% { transform: rotate(0deg); }
	}
.header01{background:url(../img/header01.png) no-repeat top left; width:400px; height:300px; position:absolute; top:0px; left:1%; z-index:-1;}
.header02{animation: yurayura 10s linear infinite;background:url(../img/header02.png) no-repeat top left; width:264px; height:145px; position:absolute; top:40px; right:5%;z-index:-1;}
header ul.p_nav{float:right; width:350px; margin:-35px 0 0 0;}
header ul.p_nav li{float: left; margin:0 0 10px 0;}
nav{ position:absolute; width:1000px; top:170px; left:0; right:0; margin:0 auto;z-index:100;}
nav ul li{float:left; margin:0 8px 0 0;}
nav ul li:last-child{float:left;margin:0 0 0 0;}

.movie{	background:url(../img/movie_bg.png) no-repeat top center;width:1330px;height:561px;padding:58px 0 0 0;margin:100px auto 0 auto;text-align:center;}
.movie .topmovie{margin: 0 auto;width: 960px;}

#wrap01{background: url(../img/hana01.png) repeat-x top; height:145px; width:100%;position:absolute; top:100px; z-index:-2;}
#wrap02{background: url(../img/hana02.png) repeat-y; height:100%;  width:145px; position:absolute; top:0px; left:-70px;}
#wrap03{background: url(../img/hana02.png) repeat-y; height:100%;  width:145px;position:absolute; top:0px; right:-70px;}

#cont{width:1000px;margin:0 auto; padding:0; z-index:100;}

footer{ clear:both;background: url(../img/f_bg.png) no-repeat center bottom; margin:0 15px; padding:50px 0; text-align:center; position:relative; height:450px;}
footer #f_wrap{width:750px; margin:20px auto; text-align:left;}
footer #f_wrap img{float:left; margin:15px 0 0 0;}
footer #f_wrap p{ float:right;}footer #f_wrap p strong{font-size:20px;}
footer #wrap04{background: url(../img/hana01.png) repeat-x top; height:100px; width:100%;z-index:120; position:absolute;  bottom:-15px; left:0;}
#pagetop{ text-align:center; margin:0 0 80px 0;}
address{ clear:both;text-align:center; font-size:10px;}

#wrapper {width:100%;margin:0 auto 0 auto;padding:0;text-align: left;position: relative;}

#slider{ clear:both; padding:50px 0 0 0; margin:0 0 50px 0;}#slider:after{clear:both; display:table; content:"";}
#slider #left_img{float:left; width:710px;margin:0 40px 0 0;}
#slider #left_img img{ border:#FFF solid 5px;border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;}
#slider .right_img{float:left;width:110px;}
#slider .right_img img{border:#FFF solid 5px;width:110px; height:110px;border-radius: 100px;-webkit-border-radius: 100px;-moz-border-radius: 100px;-moz-transition:-moz-border-radius 0.2s linear;-webkit-transition:-webkit-border-radius 0.2s linear;transition:border-radius 0.2s linear;}
#slider .right_img img.even{margin:-30px 0 0 50px;}
#slider .right_img img.odd{margin:-30px 0 0 0;}
#slider .right_img img:hover{border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;}

.m_t30{margin:30px 0;}


/* ================================================================
( ・∋ Index
================================================================ */
#left{ float:left; width:240px;}
#left iframe{margin:0 0 20px 0;}
#left img{margin:0 0 20px 0;}
#right{float:right; width:740px;}
#right #plan{background: url(../img/index/plan_bg01.png) no-repeat left top; min-height:384px; position:relative; }
#right #plan:after{clear:both; display:table; content:"";}
#right #plan p{text-shadow:none;}
#right #plan .p_box{ float:right;background: url(../img/index/plan_bg02.png) no-repeat left top; width:380px; height:122px; padding:40px 60px 50px 60px; color:#000; line-height:26px; overflow:hidden;}
#right #plan .p_box:nth-child(odd){ margin:0 110px 0 0;}
#right #plan .p_box img{float:right; width:190px; margin:0 0 0 10px;}
#right #plan .p_box h4 a{ font-size:22px;color:#032878;}
#right #plan .p_btn{position:absolute; bottom:0; left:0; z-index:1;}
#right #tosa{background: url(../img/index/tosa_bg.png) no-repeat right top; padding:50px 0 0 0;}
#right #nangoku{background: url(../img/index/nangoku_bg.png) no-repeat left top; height:293px; padding:200px 0 0 400px;}

/* ================================================================
( ・∋ Cuisine
================================================================ */
#tochi{ position:relative; height:500px;}
#tochi .tochi01{background: url(../img/cuisine/tochi01_bg.png) no-repeat; width:425px; height:503px; position:absolute; right:0; top:0;}
#tochi .tochi02{background: url(../img/cuisine/tochi02_bg.png) no-repeat; width:261px; height:179px; position:absolute;left:700px; top:250px;}
#tochi .tochi03{background: url(../img/cuisine/tochi03_bg.png) no-repeat; width:300px; height:168px; position:absolute; left:0; top:280px;}
#tochi .tochi04{background: url(../img/cuisine/tochi04_bg.png) no-repeat; width:300px; height:168px;  position:absolute; left:350px; top:250px;}
#memo{ clear:both;padding:50px 0;}
#memo img{float:left; margin:0 10px 0 0;}
#memo p{clear:both; text-align:right;}
#memo .round{border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;}
#tataki{position:relative; height:1250px;}
#tataki .t01{ position:absolute; top:0; left:10px;}
#tataki .t02{ position:absolute; top:200px; right:10px;}
#tataki .t03{ position:absolute; top:450px; left:0;}
#tataki .t04{ position:absolute; top:700px; right:0;}
#tataki .t05{ position:absolute; top:870px; left:0;}
#tataki .memo01{position:absolute; top:80px; right:10px; z-index:1;}
#tataki .memo02{position:absolute; top:480px; right:0; z-index:1; width:400px;}

/* ================================================================
( ・∋ Leisure
================================================================ */
#joy{ clear:both; position:relative; height:800px;}
#joy .joy01{ position: absolute; top:0; right:0;}
#joy .joy02{ position: absolute; top:300px; right:0; z-index:1;}
#joy p{width:380px;}
.beach01{float:right; margin:50px 0 0 0;}
#l_tataki{position:relative; height:1650px;}
#l_tataki .t01{ position:absolute; top:0; left:10px;}
#l_tataki .t01_2{ position:absolute; top:300px; left:200px;z-index:1;}
#l_tataki .t02{ position:absolute; top:170px; right:10px;}
#l_tataki .t02_2{ position:absolute; top:350px; right:350px; z-index:1;}
#l_tataki .t03{ position:absolute; top:600px; left:0;}
#l_tataki .t03_2{ position:absolute; top:700px; right:30px;}
#l_tataki .t04{ position:absolute; top:1000px; left:0;}
#l_tataki .t05{ position:absolute; top:1150px; right:0;}
#l_tataki .t05_2{ position:absolute; top:1100px; right:100px;}

/* ================================================================
( ・∋ Sightseeing
================================================================ */
#balloon-1-right {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	line-height: 38px;
	color: #19283C;
	text-align: center;
	background: #F6F6F6;
	border: 3px solid #19283C;
	z-index: 0;
	text-shadow:none; margin:0 20px 20px 0;
}
#balloon-1-right:before {
	content: "";
	position: absolute;
	top: 50%; right: -8px;
	margin-top: -9px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 9px 0 9px 9px;
	border-color: transparent transparent transparent #F6F6F6;
	z-index: 0;
}
#balloon-1-right:after {
	content: "";
	position: absolute;
	top: 50%; right: -12px;
	margin-top: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #19283C;
	z-index: -1;
}
#sightseeing{ clear:both;position:relative; height:500px;}
#sightseeing .image02{ position:absolute; width:500px; margin:0 auto; top:50px; left:0; right:0; z-index:1;}
#sightseeing .image03{position:absolute; left:0;animation: moveimg2 5s infinite;}
#sightseeing .image04{position:absolute; right:0;animation: moveimg 5s infinite;}
@keyframes moveimg {
		0% { right: 100px; top: 0px;}
		25% { right: 0px; }
		50% { right: 0px; top: 100px; }
		75% { right: 0px; }
		100% { right: 100px; top: 0px;}
	}
@keyframes moveimg2 {
		0% { left: 100px;}
		50% { left: 0px; }
		100% { left: 100px;}
	}