@CHARSET "UTF-8";


	#content1{
		background: #fff;
		margin: 0;
	}

	/* h2---------------------------------- */

	h2{
		position: relative;
		padding: 3px 0 6px 15px;
		font-size: 14px;
		width: 100%;
		color: #fff;
		background: #004080; /*#124399;*/
	}

	h2:first-letter {
		margin-right: .1em;
		font-size: 20px;
	}

	h2::after {
		position: absolute;
		top: 4px;
		left:5px;
		content: '';
		width: 2px;
		height:25px;
		background: #fff;
	}

/* ------------- 予約 ------------------- */


	.reservationBox h3{
		text-align: center;
		margin:0;
		padding:0;
	}

	.reservationBox{
		color: #000;
		width: 100%;
		margin: 0 auto;
		padding: 5px 0;
		background: #fff;
	}

	.reservationBoxIn{
		max-width:1000px;
		margin: 0 auto;
	}

	.reserve{
		width: 100%;
		background: #9E9603;
		color: #fff;
		font-size: 22px;
		text-align: center;
		padding: 15px 0 0;
		display: block;
	}


	.balloon{
		position: relative;
		background: #9E9603;
		padding: 5px 0;
	}
	.balloon:after{
		content: "";
		position: absolute;
		right: 0;
		bottom: -20px;
		left: 0;
		width: 0px;
		height: 0px;
		margin: auto;
		border-style: solid;
		border-color: #9E9603 transparent transparent transparent;
		border-width: 20px 20px 0 20px;
	}


	/* table テーブル */
	.reservationBox .innerBox{
		width: 100%;
		padding: 0;
		margin: 20px auto 0;
	}

	.reservationBox .innerBox tr th{
		background: #fff;
		width: 100%;
		padding: 7px 0 6px;
		text-align: center;
	}

	.reservationBox .innerBox tr th p{
		font-size:26px;
		margin: 0 0 5px;
	}

	.reservationBox .innerBox td{
		border: solid 1px #9E9603;
		width: 30%;
		padding: 10px 0;
		background: #fff;
	}

	.reservationBox .innerBox td p{
		text-align: center;
		margin: 15px auto ;
	}

	.reservationBox .innerBox td a{
		color: #000;
		font-size: 16px;
		display: block;
	}

	.reservationBox .innerBox td:hover{
		background: #eee;
	}

	.reservationBox .innerBox th p.privacy{
		text-align: center;
		font-size: 12px;
	}

	.reservationBox .innerBox td p.privacy a{
		display: inline;
	}

	.reservationBox .innerBox td span{
		font-size: 11px;
		color: #000;
	}

	.box27 {
	    position: relative;
		max-width: 964px;
		margin: 50px auto;
	    padding: 0.5em 1em;
	    border: solid 3px #62c1ce;
	    background: #fff;
	}
	.box27 .box-title {
	    position: absolute;
	    display: inline-block;
	    top: -27px;
	    left: -3px;
	    padding: 0 9px;
	    height: 25px;
	    line-height: 25px;
	    font-size: 17px;
	    background: #62c1ce;
	    color: #ffffff;
	    font-weight: bold;
	    border-radius: 5px 5px 0 0;
	}
	.box27 p {
		background: #ccc;
		text-align: left;
	    margin: 0;
	    padding: 0;
	}

	img.sticker {
		width: 250px;
		height: 250px;
	}



	/* 見出し ----------------------------------------*/

	.gridwrapper{
		clear:both;
		max-width: 1000px;
		overflow:hidden;
		margin: 50px auto 40px;
		display:table;
		background: #fff;
/*		border: solid 1px #ddd;*/
	}

	/* 見出し個々 -------------------------------------*/
	.grid{
		width:380px;
		display:table-cell;
		vertical-align: top;   /* 上端を揃える */
		background: #fff;
/*		border: solid 1px #ccc;*/
		overflow:hidden;
	}

	.grid:nth-child(2){
		border-left: solid 1px #ccc;
		border-left: 90%;
		border-right: solid 1px #ccc;

	}

	* html .gridWrapper{height:1%;}


	.box{
		background: #fff;
		padding:5px;
		margin: 5px;
	}

	.box img{
		width:100%;
		height: auto;
		display: block;
		margin: 0 auto 15px;
	}

/*
	.box h3{
		font-size:16px;
		padding:10px 0 15px 16px;
	}

	.box h3, .box p{
		text-align:left;
	}
*/
	.box p.readmore{
		padding:10px 10px 5px;
		text-align:right;
	}

	.box p.readmore a{
		padding:3px 7px;
		border-radius:3px;
	}



@media only screen and (max-width:480px){
	.grid{
		display: block;
		width:100%;

	/*	border: solid 1px #ccc;*/
	}

	.box img{
		width: 100%;
		clear: both;
	}
}



	/* --- #leftArea ------------------------------------------ */

	#leftArea{
		width:70%;
		float:left;
		margin-top: 10px;
	}

	/* --- 目的別宿泊プラン -------------- */

	.plan{
		width:100%;
		margin: 0 auto 30px;
		padding-bottom: 15px;
		background: #fff;
		overflow: hidden;
	}

	.plan table.plan{
		width: 100%;
		margin: 15px 0;
	}
	.plan table.plan img{
		width: 96%;
		display: block;
		margin: 0 auto;
		border-radius: 7px;
	}

	.plan table.plan tr{
		height: 120px;

	}

	.plan table.plan td{
		width: 50%;
	}

	div.plan table.plan span{
		background: url("/petitriviere/img/module/all/icn_link02.gif") no-repeat scroll left center;
		margin-left:10px;
		margin-top:3px;
	}

	div.plan table.plan span a{
		margin-left:10px;
	}




/* --- ãƒ¬ã‚¹ãƒˆãƒ©ãƒ³æž  ------------------------------------*/

	.restaurant{
		width: 100%;
		height: auto;
		padding: 0;
	/*	background: linear-gradient(135deg, #a79756, #faf8c5, #a79756);*/
		background: #fff;
		overflow: hidden;
	}

	.restaurant p{
		margin-left: 15px;
	}

	img.lunch{
		width: 96%;
		margin: 2%;
	}

	.lunch:hover{
		opacity: 0.8;
	}

	.cal{
		width: 96%;
		margin: 0 auto;
	}

/* --- ç ”ä¿®ãƒ—ãƒ©ãƒ³æž  ---------------------------------------------- */

	.planListWide{
		width:100%;
		margin: 20px auto 10px;
		background-color:#f1ead9;
		overflow:hidden;
	}
	.planListWide h3{
		font-weight:bold;
		margin: 2% 0 1% 10px;
	}
	.planListWide .planDetailWide{
		width:96%;
		margin: 0 2% 2% 2%;
		border:solid 2px #CCC;
		background-color:#FFF;
	}
	.planListWide .planDetailWide h3{
		padding:0px 5px 5px 25px;
		border-bottom:solid 2px #CCC;
		background:url(/petitriviere/img/module/all/icn_link01.gif) 5px 7px no-repeat;
	}
	.planListWide .planDetailWide .inBox{
		overflow:hidden;
		padding:10px 10px 10px 15px;
	}
	.planListWide .planDetailWide .inBox .leftimg{
		float:left;
		margin-right: 15px;
	}

/* --- ロゴについて ------------------------------------------------ */

	.logoTxt{
		width: 100%;
		margin:20px auto 10px;
		background: #fff;
		overflow:hidden;
	}
	.logoTxt .logoWide{
		width:96%;
		margin: 2% auto;
		border:solid 2px #ccc;
		background: #fff;
	}
	.logoTxt .logoWide h3{
		padding:5px 5px 5px 25px;
		border-bottom:solid 2px #CCC;
		background:url(/petitriviere/img/module/all/icn_link01.gif) 5px 7px no-repeat;
	}
	.logoTxt .logoWide .inBox{
		overflow:hidden;
		padding:10px 10px 10px 15px;
	}
	.logoTxt .logoWide .inBox .leftimg{
		float:left;
		margin-right: 15px;
	}

/* --- #rightArea ------------------------------------------ */

	#rightArea{
		width:25%;
		float:right;
		margin-top: 10px;
	}


	/* ------- Twitter --------------*/

	div.twitter{
		background: #fff;
		overflow: hidden;
	}

	/* ------- バナー ---------------*/

	div.bnr{
		margin:15px 0;
		background: #f8f8dc;
	}

	div.bnr li{
		margin-bottom:2px;
	}

	img.bnr{
		width: 100%;
	}

	img.bnr:hover{
		opacity: 0.8;
	}


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


	#contentFrame{
		width:100%;
		/*	padding:0px; */
		/* overflow:hidden; */
	}

	#contents{
		width:100%;
		margin: 20px 0px;
		padding-top: 20px;
	}


	/* --- ãƒ¬ã‚¹ãƒˆãƒ©ãƒ³æž  --- */
	div.restaurant{
		width: 98%;
		height: auto;
		background: #f7f6e4;
		margin: 1%;
	}

	/* --- ç ”ä¿®ãƒ—ãƒ©ãƒ³ --- */
	.planListWide{
		width: 98%;
		height: auto;
		margin: 1%;
	}

	/* --- ロゴについて --- */
	.logoTxt{
		width: 98%;
		height: auto;
		margin: 1%;
	}
}

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

	/* --- #leftArea ------------------------------------------ */
	#leftArea{
		width: 100%;
		display: block;
		float:none;
		margin-top: 0px;
	}


	/* --- #rightArea ------------------------------------------ */

	#rightArea{
		width:100%;
		display: block;
		float: none;
		margin-top: 30px;
	}

}

/*  680px ---------------------------------------------------*/

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

	div.planBox ul li span{
		font-size: 13px;
		background: url("/petitriviere/img/module/all/icn_link02.gif") no-repeat scroll left center;
		margin-left:10px;
		margin-top:3px;
	}
}


/*  480px以下 -----------------------------------------------*/

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

	#contents{
	margin-top: 10px;
	padding: 0;
	}

	.balloon{
		position: relative;
		background: #9E9603;
		padding: 10px 0 5px;
	}

	/* table */
	.reservationBox .reserve{
		display: block;
		padding: 19px 0 0;
		margin: 0px auto;
	}

	.reservationBox .reserve img{
		width: 55%;
	}


	.reservationBox .innerBox tr th{
		display: block;
		width: 100%;
		padding: 0;
		text-align: center;
	}

	.reservationBox .innerBox tr th p{
		font-size:15px;
	}

	.reservationBox .innerBox tr th img{
		vertical-align:middle;
	}

	.reservationBox .innerBox td{
		display: block;
		width: 100%;
		padding: 4px 0;
	}

	.reservationBox .innerBox td:nth-child(2){
		border-top: none;
		border-bottom: none;
	}

	.box27:first-child {
		margin: 35px 0;
	}

	.box27:last-child{
		margin-top: 15px;
		margin-bottom: 0;
	}

	div.plan table.plan span{
		font-size: 13px;
		margin-left:10px;
		margin-top:3px;
	}

	div.plan table.plan span a{
		margin-left:10px;
	}

	.restaurant p{
		font-size: 13px;
	}

	/* --- ロゴについて --- */
	.logoTxt{
	margin-top: 20px;
		font-size: 13px;
	}

}