@charset "utf-8";
/* ===================================================================
CSS information

 file name  : homepage.css
 author     : Ability Consultant
style info  : トップページページ
=================================================================== */

/* -----------------------------------------------------------
	各ページ専用指定
----------------------------------------------------------- */

/* -----------------------------------------------------------
	#宿クーポン
----------------------------------------------------------- */
a#rc_rightArea {
	width: 250px;
	right: -50px;
	position: fixed;
	top: 210px;
	right: -50px;
	/*マウスを乗せた時に出てくる幅*/
	display: inline-block;
	transition: all .2s ease;
	z-index: 9999;
}
a#rc_rightArea:hover {
	right: 0;
}

/* -----------------------------------------------------------
	#flash部分
----------------------------------------------------------- */
#homepage .con_flash {
	clear: both;
	width: 950px;
	height: 440px;
}

/* -----------------------------------------------------------
	メインスライド
----------------------------------------------------------- */
.main_slider {
	display: block;
	margin-bottom: 20px;
}
.slick-track {
	transform: none;/*ie11対策*/
}
.slick-prev:before, .slick-next:before {
	content: none;
}
.con_mainimg #obj_mainimg .slick-prev,
.con_mainimg #obj_mainimg .slick-next {
	width: 35px;
  height: 35px;
  background: url(../images/home/ArrowR.png) no-repeat left top;
}
.con_mainimg #obj_mainimg .slick-prev {
	-webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  margin-left: 40px;
}
.con_mainimg #obj_mainimg .slick-next {
	margin-right: 40px;
}
.con_mainimg #obj_mainimg .slick-prev:hover,
.con_mainimg #obj_mainimg .slick-next:hover {
  opacity: .6;
  transition-duration: .3s;
}
.con_mainimg #obj_mainimg .slide {
	height: 440px;
}
.con_mainimg #obj_mainimg .slide1 {
	background: url(../images/home/img01.jpg) no-repeat center center / cover;
}
.con_mainimg #obj_mainimg .slide2 {
	background: url(../images/home/img02.jpg) no-repeat center center / cover;

}
.con_mainimg #obj_mainimg .slide3 {
	background: url(../images/home/img03.jpg) no-repeat center center / cover;

}
.con_mainimg #obj_mainimg .slide4 {
	background: url(../images/home/img04.jpg) no-repeat center center / cover; 

}
.con_mainimg #obj_mainimg .slide5 {
	background: url(../images/home/img05.jpg) no-repeat center center / cover;

}
.con_mainimg #obj_mainimg .slide6 {
/*春用*/
/*background: url(../images/home/img06_spring.jpg) no-repeat center center / cover;  */
/*夏用*/
background: url(../images/home/img06_summer.jpg) no-repeat center center / cover;
/*秋用*/
/*background: url(../images/home/img06_autumn.jpg) no-repeat center center / cover; */
/*冬用*/
/*background: url(../images/home/img06_winter.jpg) no-repeat center center / cover; */

}
.con_mainimg #obj_mainimg .slide7 {
	background: url(../images/home/img07.jpg) no-repeat center center / cover;

}

/*	main
----------------------------------------------------------- */
/*#main {
	margin-top:40px;
}*/
#main .con_plan {
	background:#fafafa;
	width:702px;
	padding:15px 0 23px 18px;
	overflow:hidden;
}
#main .con_plan .box_plan .plan_contents table tr td {
	padding: 5px 10px;
}
#main .con_plan .plan_top {
	width:720px;
	overflow:hidden;
	background:url(https://www.pax-yoshino.com/rakuten/images/home/bg_cen01.png) repeat-y top left;
	margin-bottom:3px;
}
#main .con_plan .plan_top .plan_contents {
	width:636px;
	padding:7px 53px 7px 13px;
	overflow:hidden;
}
#main .con_plan .plan_top .l_box {
	width:294px;
	float:left;
}
#main .con_plan .plan_top .r_box {
	width:313px;
	float:right;
	margin:8px 0 0 29px;
}
#main .con_plan h4 {
	margin-bottom:14px;
}
#main .con_plan h5 {
	color:#690505;
	text-decoration:underline;
	margin-bottom:12px;
}
#main .con_plan h5 a {
	color:#690505;
}
#main .con_plan h5 a:hover {
	color:#690505;
	opacity: 0.8;
}
#main .con_plan .plan_top .r_box table {
	margin:15px 0 0;
	float:left;
}
/*#main .con_plan .plan_top .r_box table tr td {
	width:90px;
}*/
#main .con_plan .plan_top .r_box p.btn {
	float:right;
	margin:20px 0 0;
}
/*	下段プラン	*/
#main .con_plan .plan_list {
	width:225px;
	float:left;
	margin-right:5px;
}
#main .con_plan .plan_list .plan_contents {
	width:199px;
	padding:7px 13px;
	background:url(https://www.pax-yoshino.com/rakuten/images/home/bg_cen02.png) repeat-y top left;
}
#main .con_plan .plan_list .plan_contents p.img_area {
	padding:0 0 7px;
	border-bottom:1px solid #d4d4d4;
	margin:0 0 10px;
}
#main .con_plan .plan_list .plan_contents .tbl_basic {
	margin:20px auto;
}
#main .con_plan .plan_list .plan_contents p.btn {
	padding-bottom:20px;
	text-align:center;
}

/*	main_bot
----------------------------------------------------------- */
/*		キャッチ画像		*/
#main_bot {
	margin:28px auto 0;
}
#main_bot h3 {
	margin-bottom:40px;
	text-align:center;
}
#main_bot .box_catch {
	width:950px;
	overflow:hidden;
}
#main_bot .box_catch .info_area {
	/*width:305px;*/
	width:310px;
	background:#fafafa;
	padding:113px 55px 0 110px;
	min-height:361px;
	_height:361px;
}
#homepage #page #main_bot .box_catch a.info_area {
	display:block;
	text-decoration:none; !important
}
#main_bot .box_catch .info_area p.txt_area {
	color:#333;
}
#main_bot .box_catch .info_area h4 {
	margin-bottom:39px;
}
#main_bot .box_catch .info_area p.txt_area {
	text-align:right;
}
#main_bot .box_catch .info_area p.btn_area {
	text-align:right;
	margin-top:23px;
}
#main_bot .box_catch p.pic_area {
	width:475px;
}
#main_bot .catch_spa .info_area {
	width:413px;
	padding:92px 0 0 62px;
	min-height:382px;
	_height:382px;
	overflow:hidden;
}
#main_bot .catch_spa .info_area p.txt_area,
#main_bot .catch_spa .info_area p.btn_area {
	text-align:left;
}
#main_bot .catch_dish .info_area {
	padding:112px 60px 0 38px;
	width:377px;
}
#main_bot .catch_dish .info_area a {
	display:block;
	width:475px;
	height:474px;
	text-decoration:none; !important
}

/*	　ホテルへのアクセス		*/
#main_bot .con_access {
	width:950px;
	background:#fafafa;
	margin-top:60px;
	padding-bottom:20px;
}
#main_bot .con_access h3 {
	margin-bottom:20px;
}
#main_bot .con_access a.box_access {
	display:block;
	width:910px;
	overflow:hidden;
	margin:0 auto;
	text-decoration:none;
}
#main_bot .con_access .info_area {
	padding:35px 25px 0 24px;
	background:#FFF;
	width:290px;
	min-height:230px;
	_height:230px;
}
#main_bot .con_access .info_area h4 {
	margin-bottom:28px;
}
#main_bot .con_access .info_area p {
	color:#333;
}
#main_bot .con_access .info_area p.btn_map {
	margin-top:20px;
	text-align:right;
}
#main_bot .con_access .pic_area {
	width:570px;
}

/*	side
----------------------------------------------------------- */
#homepage #contents #side {
	margin-left: 20px;
}


/*	slider02
----------------------------------------------------------- */
#wrapper {
	overflow: hidden;
	width: 100%;
}
input[type="radio"] {
	display: none;
}
/* :::::: slideshow :::::: */
#slideshow {
	position: relative;
	/*width: 950px;*/
	width: 100%;
	max-width: 950px;
	height: 440px;
	overflow: hidden;
}
.slideContents_auto,
.slideContents_select{
	position: absolute;
	-webkit-user-select: none;
	user-select: none;
	width: 400%;
	-webkit-transition: -webkit-transform .6s;
	transition: transform .6s;
	text-align: center;
}
.slideContents_auto {
	z-index: 2;
	animation: slider 24s ease infinite;
}
.slideContents_select {
	z-index: 1;
}
.slideContents_auto::after,
.slideContents_select::after {
	content: "";
	display: block;
	clear: both;
}
.slideContents_auto section,
.slideContents_select section  {
	float: left;
	width: 25%;
}
.slideContents_auto section img,
.slideContents_select section img {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	margin: 0 !important;
	padding: 0 !important;
}
/* :::::: slideshow mechanism :::::: */
#switch1:checked ~ #slideshow .slideContents_select {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
#switch2:checked ~ #slideshow .slideContents_select {
	-webkit-transform: translateX(-25%);
	transform: translateX(-25%);
}
#switch3:checked ~ #slideshow .slideContents_select {
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#switch4:checked ~ #slideshow .slideContents_select {
	-webkit-transform: translateX(-75%);
	transform: translateX(-75%);
}

#switch1:checked ~ #slideshow .slideContents_auto,
#switch2:checked ~ #slideshow .slideContents_auto,
#switch3:checked ~ #slideshow .slideContents_auto,
#switch4:checked ~ #slideshow .slideContents_auto {
	display: none;
}

@keyframes slider {
	0% { transform: translateX(0); }
	10% { transform: translateX(0); }
	25% { transform: translateX(-25%); }
  35% { transform: translateX(-25%); }
  50% { transform: translateX(-50%); }
  60% { transform: translateX(-50%); }
  75% { transform: translateX(-75%); }
  85% { transform: translateX(-75%); }
  100% { transform: translateX(0); }
}

/* :::::: arrows :::::: */
.arrow,
.arrow label,
.arrow .ico {
	position: absolute;
}
.arrow {
	top: 0;
	margin: 0;
	transition: background .3s;
	z-index: 99;
}
.prev { left: 0; }
.next { right: 0; }
.arrow,
.arrow label {
	cursor: pointer;
	width: 45px;
	height: 100%;
}
.arrow label {
	top: 0;
	left: 0;
	z-index: 1;
}
.arrow .ico {
	top: 50%;
	width: 35px;
	height: 35px;
	margin-top: -6px;
	background: url(../images/home/ArrowR.png) no-repeat left top;
	/*transition: right .6s, left .6s, opacity .6s;*/
}
.arrow:hover .ico {
	opacity: .6;
	transition-duration: .3s;
}
.prev .ico {
	left: 30%;
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}
.next .ico {
	right: 30%;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
/* :::::: arrows mechanism :::::: */
.arrow label {
	pointer-events: none;
}
#switch1:checked ~ #slideshow .prev label[for="switch4"],
#switch2:checked ~ #slideshow .prev label[for="switch1"],
#switch3:checked ~ #slideshow .prev label[for="switch2"],
#switch4:checked ~ #slideshow .prev label[for="switch3"],
#switch_dummy:checked ~ #slideshow .prev label[for="switch4"],
#switch1:checked ~ #slideshow .next label[for="switch2"],
#switch2:checked ~ #slideshow .next label[for="switch3"],
#switch3:checked ~ #slideshow .next label[for="switch4"],
#switch4:checked ~ #slideshow .next label[for="switch1"],
#switch_dummy:checked ~ #slideshow .next label[for="switch2"] {
	pointer-events: auto;
}