@charset "UTF-8";

/*///////////////////////////////////////////////*/
/*//////////////////// 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-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	font-weight: 500;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{
	text-decoration:none;
}
img{
	border:none;
	vertical-align: bottom;
}

a:hover img {
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	-webkit-transition: all, 0.3s;
	transition: all, 0.3s;
}

/*//////////////////////////////////////////////*/
/*//////////////////// Base ////////////////////*/
/*//////////////////////////////////////////////*/

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

.txtL{text-align: left;}
.txtR{text-align: right;}
.txtC{text-align: center;}

.FR{float: right;}
.FL{float: left;}

.pt5p{padding-top: 5px;}
.mr1{margin-right: 1em;}
.ml1{margin-left: 1em;}

.mt0{margin-top: 0;}
.mt1{margin-top: 1em;}
.mt2{margin-top: 2em;}
.mt3{margin-top: 3em;}
.mt4{margin-top: 4em;}
.mt5{margin-top: 5em;}
.mt05{margin-top: 0.5em;}
.mt15{margin-top: 1.5em;}
.mt25{margin-top: 2.5em;}
.mt35{margin-top: 3.5em;}
.mt45{margin-top: 4.5em;}
.mt55{margin-top: 5.5em;}

.mb0{margin-bottom: 0;}
.mb1{margin-bottom: 1em;}
.mb2{margin-bottom: 2em;}
.mb3{margin-bottom: 3em;}
.mb4{margin-bottom: 4em;}
.mb5{margin-bottom: 5em;}
.mb05{margin-bottom: 0.5em;}
.mb15{margin-bottom: 1.5em;}
.mb25{margin-bottom: 2.5em;}
.mb35{margin-bottom: 3.5em;}
.mb45{margin-bottom: 4.5em;}
.mb55{margin-bottom: 5.5em;}

.pt0{padding-top: 0;}
.pt1{padding-top: 1em;}
.pt2{padding-top: 2em;}
.pt3{padding-top: 3em;}
.pt4{padding-top: 4em;}
.pt5{padding-top: 5em;}
.pt05{padding-top: 0.5em;}
.pt15{padding-top: 1.5em;}
.pt25{padding-top: 2.5em;}
.pt35{padding-top: 3.5em;}
.pt45{padding-top: 4.5em;}
.pt55{padding-top: 5.5em;}

.pb0{padding-bottom: 0;}
.pb1{padding-bottom: 1em;}
.pb2{padding-bottom: 2em;}
.pb3{padding-bottom: 3em;}
.pb4{padding-bottom: 4em;}
.pb5{padding-bottom: 5em;}
.pb05{padding-bottom: 0.5em;}
.pb15{padding-bottom: 1.5em;}
.pb25{padding-bottom: 2.5em;}
.pb35{padding-bottom: 3.5em;}
.pb45{padding-bottom: 4.5em;}
.pb55{padding-bottom: 5.5em;}

.fs08{font-size: 0.8em;}
.fs09{font-size: 0.9em;}
.fs12{font-size: 1.2em;}
.fs14{font-size: 1.4em;}
.fs16{font-size: 1.6em;}
.fs18{font-size: 1.8em;}

/*////////////////////////////////////////////////*/
/*//////////////////// header ////////////////////*/
/*////////////////////////////////////////////////*/

header{	width: 100%; padding: 10px 0; border-bottom: 5px solid #b90f1b;}
header h2{ width: 990px; margin: 0 auto;}
header h2 img{ height: 40px;}

/*/////////////////////////////////////////////*/
/*//////////////////// top ////////////////////*/
/*/////////////////////////////////////////////*/

#top-slider{ width: 100%; min-height: 550px;}
#top-slider .slide{ min-height: 550px;}
#top-slider .slide-1{ background: url("../images/slide-1.jpg") no-repeat center; background-size: cover;}
#top-slider .slide-2{ background: url("../images/slide-2.jpg") no-repeat center; background-size: cover;}

#top-read{ position: relative;}
#top-read h1{ 
	position: absolute;
	bottom: -230px;
	left: 50%;
	transform: translateX(-50%);
}
#top-read h1 img{ max-width: 760px;	height: auto;}

/*///////////////////////////////////////////////*/
/*////////////////// contents ///////////////////*/
/*///////////////////////////////////////////////*/

main p{ line-height: 1.5;}
.inner{	width: 990px; margin: 0 auto;}
.kn-inner{ width: 1060px; margin: 0 auto;}
a.link-btn{ padding: 0.5em; text-align: center;}
a.link-btn{
	display: block;
	position: relative;
    background: #b90f1b;
    color: #fff;
    font-weight: bold;
    padding: 0.6em 0.7em 0.6em 0;
    text-align: center;
    font-size: 17px;
	line-height: 1.2;
    border-radius: 10px;
	transition: all .3s;
	border: 1px solid #b90f1b;
}
a.link-btn::after{
	content: "\025B8";
	float: right;
	font-size: 1.8em;
	transition: transform .4s;
	position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}
a.link-btn::before{
	content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid #b90f1b;
    border-radius: 14px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(6px,5px);
    transition: all .4s;
}
a.link-btn:hover::after{ transform: translate(10px,-50%);}
a.link-btn:hover::before{ transform: translate(0,0); opacity: 0;}
a.link-btn:hover{ background: none;	color: #b90f1b;}

h4{
	font-size: 15px;
	font-weight: bold;
	line-height: 1.5;
	color: #434343;
}
h4 span{
	position: relative;
	display: inline-block;
	z-index: 1;
}
h4 span:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	z-index: -1;
	width: 100%;
	height: 60%;
	background: url("../images/title-bg.png") repeat;
}

/*////////////////// 空庭温泉 ///////////////////*/

#contents-1{
	padding: 290px 0 50px;
	    background: url(../images/block-bg-1.png) repeat-x top, url(../images/sub-bg.png) no-repeat right top, url(../images/sub-bg-2.png) no-repeat left top, #fff9f5;
}
#contents-1 .title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1em;
}
#contents-1 .title p{ padding-right: 0.7em;}
#contents-1 .title p img{ height: 33px;}
#contents-1 .title h3{ font-size: 25px;	font-weight: bold; position: relative; width: 60%;}
#contents-1 .title h3:before{
	content: "";
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 50%;
	background: url("../images/title-bg.png") repeat;
	z-index: -1;
}
#contents-1 .title hr{ width: 72%; border: 1px solid #b90f1b;}

#contents-1 .img-wrap{ position: relative;}

#contents-1 .wrap-bg-1,
#contents-1 .wrap-bg-2{	position: absolute;}
#contents-1 .wrap-bg-1{	left: -110px; bottom: -115px; z-index: -1;}
#contents-1 .wrap-bg-2{ right: -85px; bottom: -130px; z-index: -1;}

#contents-1 .text-wrap{	
	width: 990px;
    padding: 10px 140px 60px;
	margin-top: 20px;
	background: url("../images/text-wrap-bg-top.png") no-repeat top center, url("../images/text-wrap-bg-bottom.png") no-repeat bottom center;
	background-size: 100%;
}
#contents-1 .text-wrap h4{
	text-align: center;
    padding-top: 1.8em;
	margin-bottom: 1.3em;
    font-size: 1.3em;
    font-weight: bold;
	position: relative;
}
#contents-1 .text-wrap h4:after{
	content: "";
	position: absolute;
	bottom: -25px;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	border-top: 5px dotted #b90f1b;
}
#contents-1 .text-wrap p{ padding-top: 1em; padding-bottom: 1.5em; font-size: 16px;}
#contents-1 .text-wrap a.link-btn{ width: 440px; margin: 0 auto;}

/*////////////////// 大阪 ///////////////////*/

#contents-2{
	width: 100%;
	background: 
		url("../images/o-bg-1.jpg") no-repeat top left, 
		url("../images/o-bg-2.jpg") no-repeat bottom right, #fff4e4;
	padding: 150px 0;
	position: relative;
}
#contents-2:before{
	content: "";
	position: absolute;
	top: 0;	
	left: 0;
    width: 100%;
	height: 83px;
	background: url("../images/block-bg-3.png") repeat-x;
	background-position: 50% 0;
	animation: 4s linear infinite slidein;
}
#contents-2:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 83px;
	background: url("../images/block-bg-4.png") repeat-x;
	background-position: 50% 1px;
	animation: 4s linear infinite slidein2;
}
@keyframes slidein {
	from { background-position: 0 0; }
	to { background-position: 1440px 0; }
}
@keyframes slidein2 {
	from { background-position: 1440px 1px; }
	to { background-position: 0 1px; }
}
#contents-2 .title h3,
#contents-3 .title h3{
	text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #b90f1b;
    line-height: 1.3;
    padding-bottom: 20px;
    position: relative;
}
#contents-2 .title h3:after,
#contents-3 .title h3:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 200px;
	border-bottom: 4px dotted #b90f1b;
	transform: translateX(-50%);
}
#contents-2 ul.hotel-list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 60px;
}
#contents-2 ul.hotel-list li{
width: 221px;
	font-size: 13px;
	padding-top: 40px;
}
#contents-2 ul.hotel-list li .hotel-img{
	overflow: hidden;
	border-radius: 10px;
	margin-top: 1em;
}
#contents-2 ul.hotel-list li img{
	width: 100%;
}
#contents-2 ul.hotel-list li p{
	padding: 1em 0 1.5em;
}
#contents-2 ul.hotel-list li a{
	font-size: 14px;
	border-radius: 5px;
	padding: 0.8em 0.7em 0.8em 0;
}
#contents-2 ul.hotel-list li a:before{
	border-radius: 7px;
}


/*////////////////// 京都・奈良 ///////////////////*/

#contents-3{
	padding: 20px 0 160px;
	    background: url(../images/block-bg-2.png) repeat-x left bottom;
}
#contents-3 .kn-wrap{
	display: flex;
	justify-content: space-between;
	margin-top: 35px;
}
#contents-3 .kn-wrap .box{
	width: 510px;
	padding: 40px 30px;
	box-sizing: border-box;
	background: #fff4e4;
	border-radius: 10px;
	position: relative;
}
#contents-3 .kn-wrap .box:after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	right: -10px;
	bottom: -10px;
	z-index: -1;
	border-radius: 10px;
	background: url("../images/kn-bg.png") repeat;
}
#contents-3 h4{
	font-size: 21px;
	text-align: center;
	margin-bottom: 10px;
}
#contents-3 h5{
	font-size: 16px;
	font-weight: bold;
	padding-top: 10px;
	color: #b90f1b;
}
#contents-3 .box ul.box-list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#contents-3 .box ul.box-list li{
	width: 215px;
	font-size: 13px;
	margin-top: 20px;
}
#contents-3 .box ul.box-list li p{
	padding-top: 10px;
}
#contents-3 .box ul.box-list li.img{
	height: 175px;
	border-radius: 10px;
}
#contents-3 .box ul.box-list li a{
	font-size: 13px;
	border-radius: 5px;
	width: 94%;
	margin-top: 15px;
}
#contents-3 .box ul.box-list li a:before{
	border-radius: 7px;
}
#contents-3 .n-box ul.box-list li p{
	letter-spacing: -1px;
}
#contents-3 .Map{
	margin-top: 30px;
}

#contents-3 .k-box ul li:nth-child(1).img{
	background: url("../images/k-img-1.jpg") no-repeat center;
	background-size: cover;
}
#contents-3 .k-box ul li:nth-child(4).img{
	background: url("../images/k-img-2.jpg") no-repeat center;
	background-size: cover;
}
#contents-3 .n-box ul li:nth-child(1).img{
	background: url("../images/n-img-1.jpg") no-repeat center;
	background-size: cover;
}
#contents-3 .n-box ul li:nth-child(4).img{
	background: url("../images/n-img-2.jpg") no-repeat center;
	background-size: cover;
}

.Map{
	position: relative;
	z-index: 10;
}
ul.mapicon li,
ul.hotelicon li,
ul.pointicon li{ position: absolute;}

ul.mapicon li{ z-index: 4000;}

ul.hotelicon li{ cursor: pointer; z-index: 10;}

ul.hotelicon li:nth-child(odd){ animation: vertical 1.2s ease-in-out infinite alternate;}

ul.hotelicon li:nth-child(even){ animation: vertical 1.4s ease-in-out infinite alternate;}

ul.mapicon li.map-icon:nth-child(odd){ animation: vertical 1.1s ease-in-out infinite alternate;}

ul.mapicon li.map-icon:nth-child(even){	animation: vertical 1.3s ease-in-out infinite alternate;}

ul.hotelicon li:hover,
ul.pointicon li:hover{ animation: hover 0.5s ease-in-out infinite alternate;}
ul.pointicon li{ animation: vertical 1.3s ease-in-out infinite alternate;}

#contents-3 .k-box ul.hotelicon li{ left: 50px; top: 65px;}
#contents-3 .k-box ul.pointicon li.point-icon1{ right: 5px; bottom: 129px;}
#contents-3 .k-box ul.pointicon li.point-icon2{ top: 36px; left: 5px;}


#contents-3 .n-box ul.hotelicon li{ top: 80px; left: 70px;}
#contents-3 .n-box ul.pointicon li.point-icon1{	top: 131px; right: 10px;}
#contents-3 .n-box ul.pointicon li.point-icon2{	bottom: 80px; right: 6px;}
    
#osaka-wrap ul.pointicon li{ bottom: 124px; right: 245px;}

@keyframes vertical {
	0% { transform:translateY(-3px); }
	100% { transform:translateY(  0px); }
}

@keyframes hover {
	0% { transform:translateY(-8px); }
	50% { transform:translateY(-1px); }
	100% { transform:translateX(  0px); }
}

ul.mapicon li p{
	line-height: 1.3;
	border: 2px solid #fff;
	width: 120px;
	text-align: center;
	z-index: 2000;
	opacity:0;
	-moz-opacity:1;
	filter:alpha(opacity=0); 
	-ms-filter: "alpha(opacity=0)";
	-khtml-opacity: 0;
	zoom:1;
	transition:0.8;
	-webkit-transition: all, 0.8s;
	transition-duration:0.8s;
	position: absolute;
	top: -50px;
	left: -50px;
	background: #f27116;
	color: #fff;
	padding: 10px;
	border-radius: 10px;}

ul.mapicon li:hover p{
	opacity:1;
	-moz-opacity:1;
	filter:alpha(opacity=100); 
	-ms-filter: "alpha(opacity=100)";
	-khtml-opacity: 1;
	zoom:1;
	transition:0.8;
	-webkit-transition: all, 0.8s;
	transition-duration:0.8s;}

ul.mapicon li.osaka-icon03 p{
	width: 75px;
	right: -60px;
	top: 20px;
	left: auto;}

ul.mapicon li.kyoto-icon01 p{
	top: auto;
	bottom: -40px;}

ul.mapicon li.kyoto-icon05 p{
	    right: -130px;
    top: 0;
    left: auto;}

ul.mapicon li.kyoto-icon02 p{
	width: 135px;
}
ul.mapicon li.osaka-icon04 p{    top: -10px;
    left: -125px;}
ul.mapicon li.osaka-icon05 p{    top: 8px;
    left: 60px;}
ul.mapicon li.osaka-icon06 p{top: -28px;
    left: 39px;}

/*大阪*/

ul.mapicon li.osaka-icon01{ bottom: 103px; left: 170px; margin: auto;}

ul.mapicon li.osaka-icon01 p{ left: -140px; top: 10px;}

ul.mapicon li.osaka-icon02{ bottom: 30px; left: 120px;}

ul.mapicon li.osaka-icon03{
	z-index: 10000;
	left: 65px;
    bottom: 11px;}

ul.mapicon li.osaka-icon04{
	bottom: 61px;
        left: 410px;}

ul.mapicon li.osaka-icon05{
	bottom: 1px;
        right: 340px;}

ul.mapicon li.osaka-icon06{
    top: 145px;
    right: 275px;}
ul.mapicon li.osaka-icon07{
    top: 220px;
    right: 135px;}
ul.mapicon li.osaka-icon08{
right: 180px;
    top: 215px;}
ul.mapicon li.osaka-icon09{
right: 430px;
    bottom: 145px;	}


ul.hotelicon li.osaka-hotel-icon01{
bottom: 60px;
   left: 170px;}

ul.hotelicon li.osaka-hotel-icon02{
        bottom: 3px;
    left: 330px;}

ul.hotelicon li.osaka-hotel-icon03{
	z-index: 1000;
    right: 460px;
top: 165px;}

ul.hotelicon li.osaka-hotel-icon04{
       bottom: 103px;
        right: 395px;}

ul.hotelicon li.osaka-hotel-icon05{
    top: 45px;
    right: 265px;}

ul.hotelicon li.osaka-hotel-icon06{
	    right: 300px;
    bottom: 134px;}

ul.hotelicon li.osaka-hotel-icon07{
    bottom: 38px;
        right: 185px;}

ul.hotelicon li.osaka-hotel-icon08{
    bottom: 86px;
        right: 60px;}

/*京都*/

ul.mapicon li.kyoto-icon01{
    bottom: 10px;
    right: 40px;
	margin: auto;}

ul.mapicon li.kyoto-icon02{
top: 95px;
    right: 95px;}

ul.mapicon li.kyoto-icon03{
	left: 138px;
    top: 95px;}

ul.mapicon li.kyoto-icon04{
    top: 95px;
    left: 200px;}

ul.mapicon li.kyoto-icon05{
    bottom: 90px;
    right: 90px;
}

ul.mapicon li.kyoto-icon06{
	bottom: 170px;
	left: 185px;}

ul.mapicon li.kyoto-icon06{
    top: 35px;
    left: 5px;}

ul.mapicon li.kyoto-icon07{
	bottom: 40px;
	left: 180px;}

ul.hotelicon li.kyoto-hotel-icon01{
	bottom: 195px;
	left: 5px;}

/*// 京都*/

/*奈良*/

ul.mapicon li.nara-icon01{
        top: 75px;
    left: 35px;}

ul.mapicon li.nara-icon02{
    bottom: 5px;
    right: 90px;}
ul.mapicon li.nara-icon03 p{top: 41px;}
ul.mapicon li.nara-icon03{
	    right: 4px;
    bottom: 55px;}

ul.mapicon li.nara-icon04{
top: 40px;
    right: 25px;}

ul.mapicon li.nara-icon05{
top: 90px;
    right: 13px;}
ul.mapicon li.nara-icon05 p{
	top: 0;
    right: -130px;
	left: auto;
}

ul.mapicon li.nara-icon06{
	top: 110px;
	left: 195px;}

ul.hotelicon li.nara-hotel-icon01{ bottom: 205px; left: 190px;}

/*////////////////////////////////////////////////*/
/*//////////////////// footer ////////////////////*/
/*////////////////////////////////////////////////*/



/*////////////////////////////////////////////////////*/
/*//////////////////// Responsive ////////////////////*/
/*////////////////////////////////////////////////////*/

@media screen and (max-width: 1100px) {
	/*調整用*/
}

@media screen and (max-width: 770px) {
	/*タブレット端末*/
}

@media screen and (max-width: 480px) {
	/*スマートフォン端末*/
}