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

@import "reset.css";
@import "header.css";
@import "footer.css";

/*
@font-face {
   font-family: Noto Serif Japanese;
   src: url('/petitriviere/font/NotoSerifCJKjp/NotoSerifCJKjp-Medium.otf') format("opentype");
}
*/


/* --------------共通 -------------------- */

	body{
		color:#222;
		font-size:16px;
		background-color: #f8f8dc; /*#fdfaf3;*/
/*	    font-family: Noto Serif Japanese;*/
	/*	font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;*/
	}


	/* 消さない */
	#wrapper{
		overflow: hidden;
	}

	a{
		text-decoration: none;
		color:#006699;
	}

	a:hover{
		color: #777;
	}

	.right{
		text-align: right;
	}

	.left{
		text-align: left;
	}

	.center{
		text-align: center;
	}

	.clear{
		clear: both;
	}

	.blue{
		color:#00008b;
	}

	.pink{
		color:#cd5c5c;
	}

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

	.testTitle{
		font-size: 28px;
		color: red;
	}


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

	#contentFrame{
		width:100%;
		height: 100%;
		margin:0 auto;
		background: #f8f8dc;
	}

	#contents{
		max-width: 1000px;
		margin: 0 auto;
		padding: 0;
		background: #fff;
	}

	.contentsInner{
		width: 96%;
		padding: 20px 0 50px;
		margin: 30px auto;
		background: #fff;
	}

	.taisakuImg{
		background: #fff;
		width: 100%;
	}

	.taisakuImg img{
		display: block;
		width: 55%;
		margin: 30px auto;
	}

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

	.reserveButton{
		width: 800px;
		height: 150px;
		background: #000;
	}

	.Button1{
		width: 100px;
		height: 80px;
		background: #555;
	}

	.Button2{
		width: 100px;
		height: 80px;
		background: #000;
	}

	.Button3{
		width: 100px;
		height: 80px;
		background: #000;
	}

	@media screen and (max-width: 480px){
		.contentsInner{
			width: 94%;
			margin: 30px auto;
			background: #fff;
		}
	}

	* html #contentFrame{
	 height: 1%;
	}

/*	.taisakuImg img{
		width:70%;
		margin: 20px auto 0;
	}
*/

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

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

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

	/*	background: #bf955b; /* Old browsers */
	/*	background: -moz-linear-gradient(top, #bf955b 0%, #ceb10e 50%, #bf955b 100%); /* FF3.6-15 */
	/*	background: -webkit-linear-gradient(top, #bf955b 0%,#ceb10e 50%,#bf955b 100%); /* Chrome10-25,Safari5.1-6 */
	/*	background: linear-gradient(to bottom, #bf955b 0%,#ceb10e 50%,#bf955b 100%);

	/*	background: #B8860B; /*#d2bb81;*/
	}

/*	h2:first-letter {
	  margin-right: .1em;
	  font-size: 20px;
	}
*/
	h2::after {
		position: absolute;
		top: 4px;
		left:5px;
		content: '';
		width: 2px;
		height:25px;
		background: #fff;
	}



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

	h2.vector {
		position: relative;
		padding-left: 25px;
	}

	h2.vector:before {
		position: absolute;
		content: '';
		bottom: -3px;
		left: 0;
		width: 0;
		height: 0;
		border: none;
		border-left: solid 15px transparent;
		border-bottom: solid 15px rgb(119, 195, 223);
	}
	h2.vector:after {
		position: absolute;
		content: '';
		bottom: -3px;
		left: 10px;
		width: 100%;
		border-bottom: solid 3px rgb(119, 195, 223);
	}

/*---h3--------------------------------*/

	h3 {
		font-size: 20px;
		font-weight: bold;
		margin-top: 20px;
		position: relative;
		padding:8px 10px 10px 30px;
		border: 1px solid #446689;
		border-radius: 2px;
		background:
	}

	h3::after {
	     position: absolute;
	     top: 50%;
	     left:10px;
	     transform:translateY(-50%);
	     content: '';
	     width: 5px;
	     height:25px;
	     background-color: #191970;
	}

	@media screen and (max-width: 680px){
		h3{
			font-size: 16px;
			font-weight: bold;
			position: relative;
			padding:6px 8px 8px 26px;
			border: 1px solid #446689;
			border-radius: 2px;
		}

		h3::after {
			position: absolute;
			top: 50%;
			left:0.7em;
			transform:translateY(-50%);
			content: '';
			width: 5px;
			height:20px;
			background-color: #191970;
		}

	}

		h3.tweet{
			position: relative;
			padding: 0.6em;
			background: #38a3dd;
		}

		h3.tweet:after {
			position: absolute;
			content: '';
			top: 100%;
			left: 30px;
			border: 15px solid transparent;
			border-top: 15px solid #38a3dd;
			width: 0;
			height: 0;
		}

		h4 {
			position: relative;
			padding: 6px 19px 7px 35px;
			line-height: 1.4;
			color: #000;
			border-top: dotted 1px gray;
			border-bottom: dotted 1px gray;
			background: #fffff4;
			margin-top: 16px;
			font-size: 18px;
		}

		h4:before{
			transform:translateY(-50%);
			content: '';
			width: 10px;
			height:10px;
			border: solid 4px #ff0000; /*#ff6a6a;*/
 			border-radius:100%;
			position: absolute;
			left: 10px;
			top: 20px;
			color: #fffff4;
		}

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

		h4 {
			padding: 7px 19px 7px 25px;
			font-size: 16px;
		}

		h4:before{
			width: 9px;
			height:9px;
			left: 0px;
			top: 18px;
		}
}

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

	.block{
		width: 97%;
		margin: 100px auto;
	}

	.block:first-child{
		width: 97%;
		margin: 30px auto 0;
	}

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

p{
	line-height:1.5em;
}
.alert{
	color:#d22a2a;
}
#contentFrame h3.gold{
	width:100%-30px;
	height:auto;
	padding:8px 0 8px 28px;
	color:#a7870c;
	font-weight:bold;
	background:url(/petitriviere/img/page/welcome/bg_h2_.jpg) top left repeat;
/*	border-left: solid 1px #e5d191;
	border-right: solid 1px #e5d191;*/
}

h3.blueSubhead{
	padding:0 0 3px 12px;
	margin-bottom:10px;
	background:url(/petitriviere/img/module/all/ttl_blue.gif) top left no-repeat;
	border-bottom:solid 1px #ccc;
	color:#006699;
	font-weight:bold;
	clear:both;
}

h3.blueSubhead span{
	font-weight:normal;
	margin-left:15px;
}


/* goods img　*/
@media screen and (max-width: 480px){

	img.goods{
		width:100%;
		margin: 0 auto;
	}
}