@charset "utf-8";


/*-----------------------link*/

h4 a:link,
h4 a:visited {
	color: #806a00;
	font-weight: bold;
}

h4 a:hover,
h4 a:active {
	color: #806a00;
	font-weight: bold;
	text-decoration: none;
}

#list li a:link,
#list02 li a:link,
#list li a:visited,
#list02 li a:visited,
#list li a:hover,
#list02 li a:hover,
#list li a:active,
#list02 li a:active {
	text-decoration: none;
}

#list li a:link,
#list li a:visited {
	background: url(../../testporocotestgourmettesttest%20-%20Copy/img/shared/btn01.png) no-repeat 237px 188px;
}

#list li a:hover {
	background: url(../../testporocotestgourmettesttest%20-%20Copy/img/shared/btn01_o.png) no-repeat 237px 188px;
}

#list li a:active {
	background: url(../../testporocotestgourmettesttest%20-%20Copy/img/shared/btn01_a.png) no-repeat 237px 188px;
}

#list02 li a:link,
#list02 li a:visited {
	background: url(../../testporocotestgourmettesttest%20-%20Copy/img/shared/btn05.png) no-repeat 110px 90px;
}

#list02 li a:hover {
	background: url(../../testporocotestgourmettesttest%20-%20Copy/img/shared/btn05_o.png) no-repeat 110px 90px;
}

#list02 li a:active {
	background: url(../../testporocotestgourmettesttest%20-%20Copy/img/shared/btn05_a.png) no-repeat 110px 90px;
}

/*------------------------font*/

@font-face {
	font-family: "NotoSansCJKjpRegular";
	src: url('../../../../../../font/NotoSansCJKjpRegular.eot'); /* IE9 Compact Modes */
	src: url('../../../../../../font/NotoSansCJKjpRegular.eot?#') format('embedded-opentype'), /* IE6-IE8 */  url('../../../../../../font/NotoSansCJKjpRegular.woff') format('woff') /* Modern Browsers */
}

/*-----------------------common*/

body {
	-webkit-text-size-adjust: 100%;
	background-color: #fff6ef;
}

#bodyZoneA {
	width: 950px;
	margin: 0 auto;
	color: #4d3b17;
	font-size: 14px;
	font-family: "NotoSansCJKjpRegular";
	line-height: 1.6;
	background-color: #fff;
	border-radius: 3px 3px 0 0;
}

#bodyZoneA * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

.contets{
	width: 950px;
	margin: 0 auto;
}

/*-------------------------pc*/

.sp {
	display: none;
}

.mainBG{
	background: url(../../testporocotestgourmettesttest%20-%20Copy/img/index/mainBG.jpg);
}

.mainBG .main{
	width: 950px;
	margin: 0 auto;
}

h1:not(.main) {
	height: 70px;
	margin-bottom: 32px;
	padding: 22px 0 0 8px;
	text-align: center;
	background-color: #ff00a1;
	border-radius: 3px 3px 0 0;
}

h1:not(.main) a {
	display: block;
}

.mainImage {
	float: left;
	width: 340px;
	padding: 0 0 33px 33px;
}

.rightBox {
	float: left;
	width: 610px;
	padding-right: 33px;
}

.side {
	float: right;
	width: 500px;
	margin-bottom: 20px;
}

.rightBox h2 {
	margin-bottom: 23px;
}

.rightBox h3 {
	margin-bottom: 29px;
}

.coupon a {
	display: block;
	width: 268px;
	height: 78px;
	margin-top: 37px;
	padding-top: 28px;
	text-align: center;
	background-color: #ff00a1;
	border-radius: 4px;
	box-shadow: #b0006f 0 5px 0 0, #bfbfbf 0 10px 0 0;
	transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
	-webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
}

.coupon a:hover {
	background-color: #ff4fbe;
	box-shadow: #b0006f 0 3px 0 0, #bfbfbf 0 6px 0 0;
	transform: translateY(3px);
}

.coupon a:active {
	background-color: #d60087;
	box-shadow: none;
	transform: translateY(6px);
	transition-duration: 0.1s;
}

.detail {
	clear: both;
	width: 884px;
	margin: 0 auto 64px;
	padding: 25px 25px 18px 25px;
	background-color: #fdfced;
	border-radius: 3px;
}

.detail h4 {
	font-size: 17px;
}

.detail .tel {
	padding: 6px 0 10px;
	color: #806a00;
	font-size: 21px;
	font-weight: bold;
}

.detail dl {
	float: left;
	font-size: 13px;
}

.detail dl dt {
	float: left;
	clear: both;
	width: 100px;
	color: #806a00;
	font-weight: bold;
}

.detail dl dd {
	float: left;
	width: 420px;
}

.detail dl dt,
.detail dl dd {
	padding: 7px 0;
}

.subImage {
	float: right;
	width: 300px;
	margin-top: -17px;
}

.subImage img.pc {
	margin-bottom: 25px;
}

.detail .small {
	clear: both;
	padding-top: 10px;
	font-size: 13px;
}

/*20240417追記*/
.small {
	font-weight:bold;
}
/*------------------------------list(ssi)*/

.listTitle h2 {
	width: 890px;
	margin: 0 auto 35px;
	padding: 20px 0 20px;
	text-align: center;
	border-top: 2px #ff00a1 solid;
	border-bottom: 2px #ff00a1 solid;
}

.listTitle:nth-of-type(1) h2 {
	margin-top: 63px;
}

#list {
	clear: both;
	width: 910px;
	margin: 0 auto;
	overflow: hidden;
}

#list ul {
	width: 930px;
	margin-right: -20px;
}

#list ul li {
	float: left;
	width: 465px;
	margin: 0;
}

#list ul li a {
	display: block;
	width: 465px;
	height: 280px;
	overflow: hidden;
}

#list ul li a img {
	float: left;
	margin-right: 12px;
}

#list ul li a .leftBox {
	float: left;
	width: 44%;
}

#list ul li a .leftBox h3 {
	margin-top: 21px;
	padding-bottom: 20px;
	font-size: 13px;
	font-weight: bold;
}

#list ul li a .leftBox p {
	margin-bottom: -10px;
	color: #4d3b17;
	font-size: 12px;
	text-decoration: none;
}
ul {
	clear: both;
}

ul .button {
	float: left;
	padding-bottom: 67px;
}

ul li.button a {
	display: inline-block;
	width: 250px;
	height: 100px;
	margin: 0 36px 0 30px;
	padding-top: 10px;
	text-align: center;
	background-color: #003e71;
	border-radius: 4px;
	box-shadow: #03004c 0 5px 0 0, #bfbfbf 0 10px 0 0;
	transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
	-webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
}

ul li.button a:hover {
	background-color: #005aa4;
	box-shadow: #03004c 0 3px 0 0, #bfbfbf 0 6px 0 0;
	transform: translateY(3px);
}

ul li.button a:active {
	background-color: #002848;
	box-shadow: none;
	transform: translateY(6px);
	transition-duration: 0.1s;
}

/*------------------------shopList*/

.listTitle02 h2 {
	width: 890px;
	margin: 0 auto 35px;
	padding: 20px 0 20px;
	text-align: center;
}

.anchor,
.anchorGenre{
	width: 500px;
	margin: 0 auto;
	text-align: center;
}

.anchor p,
.anchorGenre p{
	display: inline-block;
	margin: 0 12px 30px;
	padding-left: 15px;
	background: url(../../testporocotestgourmettesttest%20-%20Copy/img/shared/icon.png) no-repeat left center;
	background-size: 9px;
}

#area01 h3,
#area02 h3,
#area03 h3,
#area04 h3,
#area05 h3,
#area06 h3,
#area07 h3,
#area08 h3,
#area09 h3,
#area10 h3,
#area11 h3,
#area12 h3,
#area13 h3,
#area14 h3,
#area15 h3,
#area16 h3,
#area17 h3,
#area18 h3,
#area19 h3,
#area20 h3,
#area21 h3,
#area22 h3,
#area23 h3,
#area24 h3,
#area25 h3,
#area26 h3,
#area27 h3,
#area28 h3,
#area29 h3{
	clear: both;
	margin: 0 auto 30px;
	padding-bottom: 5px;
	border-bottom: #ff00a1 2px solid;
}

#list02 {
	clear: both;
	width: 910px;
	margin: 0 auto;
	overflow: hidden;
}

#list02 ul {
	width: 930px;
	margin: 0 -20px 30px 0;
}

#list02 ul li {
	float: left;
	width: 290px;
	margin: 0 20px 20px 0;
}

#list02 ul li a {
	display: block;
	width: 290px;
	height: 150px;
	overflow: hidden;
}

#list02 ul li a img {
	float: left;
	margin-right: 10px;
}

#list02 ul li a .leftBox {
	float: left;
	width: 60%;
}

#list02 ul li a .leftBox h3 {
	padding-bottom: 2px;
	font-size: 13px;
	font-weight: bold;
}

#list02 ul li a .leftBox p {
	margin-bottom: -10px;
	color: #4d3b17;
	font-size: 12px;
	text-decoration: none;
}

/*------------------------clearFix*/

ul:after {
	content: "";
	clear: both;
	display: block;
}


@media screen and (max-width:768px) {
	
/*-----------------------common*/
	
html,
body {
	width: 100%;
	margin: 0;
}
	
.mainImage,
.rightBox {
	clear: both;
	width: 100%;
}
	
#sapporo-topicpath-area {
	display: none;
}
	
#bodyZoneA {
	width: 100%;
	overflow: hidden;
	font-size: 13px;
}
	
/*--------------------------sp*/

.sp {
	display: block;
}

h1.main.sp img {
	width:100%;
}
	
.pc {
	display: none;
}
	
img {
	max-width: 100%;
	height: auto;
}
	
h1:not(.main) {
	height: 35px;
	margin-bottom: 9px;
	padding: 10px 0 0;
	text-align: center;
	background-color: #663300;
	border-radius: 0px;
}
	
.mainImage {
	padding: 0;
	text-align: center;
}
	
.rightBox {
	margin: 0 5%;
}
	
.side {
	float: none;
	width: 100%;
	margin-bottom: 0;
	padding-top: 1px;
}
	
.rightBox h2 {
	margin: 15px 0;
}
	
.rightBox h3 {
	margin: 0 0 20px;
}
	
.rightBox .txt {
	margin-bottom: 12px;
}
	
.rightBox .txt02 {
	margin-bottom: 30px;
}
	
.coupon {
	margin: 0 auto 30px;
	text-align: center;
}
	
.coupon a {
	width: 196px;
	height: 57px;
	margin: 0;
	padding-top: 20px;
}
	
.detail {
	width: 100%;
	margin-bottom: 0;
	padding: 5%;
	background-color: #fdfced;
}
	
.detail h4 {
	font-size: 16px;
}
	
.detail .tel {
	font-size: 19px;
}
	
.detail .tel img.sp {
	display: inline;
}
	
.detail dl {
	width: 100%;
	font-size: 13px;
}
	
.detail dl dt {
	width: 25%;
}
	
.detail dl dd {
	width: 75%;
}
	
.detail dl dt, .detail dl dd {
	padding: 3px 0;
}
	
.subImage {
	width: 100%;
	margin-top: 17px;
}
	
.subImage img.pc {
	display: none;
}
	
.subImage img.sp {
	display: inline;
	margin-bottom: 0;
}
	
/*------------------------------list(ssi)*/

.listTitle h2 {
	width: 100%;
	margin-bottom: 0;
	padding: 17px 0 17px 14px;
	background-color: #663300;
	border: none;
	border-radius: 0;
}
	
.listTitle:nth-of-type(1) h2 {
	margin-top: 0;
}
	
.listTitle:nth-of-type(2) h2 {
	margin-bottom: 33px;
}
	
#list {
	width: 100%;
	margin: 0;
}
	
#list ul {
	width: 100%;
	margin-right: 0;
}
	
#list ul li {
	float: none;
	width: 100%;
	margin: 0;
	padding: 3%;
}
	
#list ul li {
	padding-bottom: 6%;
}
	
#list ul li:nth-of-type(even) {
	background-color: #fdfced;
}

#list li a:link,
#list li a:visited,
#list li a:hover,
#list li a:active {
	background: url(../../testporocotestgourmettesttest%20-%20Copy/img/shared/arrow.png) no-repeat center right;
	background-size: 17px 31px;
}

#list ul li a {
	width: 100%;
	height: auto;
}
	
#list ul li a img {
	margin-right: 18px;
}
	
#list ul li a .leftBox h3 {
	font-size: 15px;
}
	
ul {
	clear: both;
	width: 100%;
}
	
ul li.button {
	float: none;
	padding-top: 17px;
	padding-bottom: 17px;
	text-align: center;
}
	
ul li.button:nth-of-type(6) {
	padding-bottom: 53px;
	border-bottom: #663300 1px solid;
}
	
ul li.button a {
	display: inline-block;
	width: 200px;
	height: 80px;
	 margin: 0 36px 0 30px;
	padding-top: 6px;
	text-align: center;
	 background-color: #ff00a1;
	border-radius: 4px;
	box-shadow: #b0006f 0 5px 0 0, #bfbfbf 0 10px 0 0;
	transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
	-webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
}
	
ul li.button a:hover {
	 background-color: #ff4fbe;
	transform: translateY(3px);
	box-shadow: #b0006f 0 3px 0 0, #bfbfbf 0 6px 0 0;
}
	
ul li.button a:active {
	 background-color: #d60087;
	box-shadow: none;
	transform: translateY(6px);
	transition-duration: 0.1s;
}
	
/*------------------------shopList*/

.listTitle02 h2 {
	width: 100%;
	margin: 0 auto 70px;
	padding: 20px 0 20px;
	text-align: center;
}
	
.anchor,
.anchorGenre {
	width: 80%;
	margin: 33px auto;
}
	
.anchor p,
.anchorGenre p {
	margin: 0 12px 15px;
	padding-left: 10px;
	background-size: 6px;
}
	
#area01 h3,
#area02 h3,
#area03 h3,
#area04 h3,
#area05 h3,
#area06 h3,
#area07 h3,
#area08 h3,
#area09 h3,
#area10 h3,
#area11 h3,
#area12 h3,
#area13 h3,
#area14 h3,
#area15 h3,
#area16 h3,
#area17 h3,
#area18 h3,
#area19 h3,
#area20 h3,
#area21 h3,
#area22 h3,
#area23 h3,
#area24 h3,
#area25 h3,
#area26 h3,
#area27 h3,
#area28 h3,	
#area29 h3{
	clear: both;
	width: 100%;
	margin: 0 auto;
	padding: 10px 0 10px 10px;
	border-top: #ff00a1 2px solid;
}
	
.listTitle02 h2 {
	width: 100%;
	margin-bottom: 0;
	padding: 17px 0 17px 14px;
	border: none;
	border-radius: 0;
}
	
.listTitle02:nth-of-type(1) h2 {
	margin-top: 0;
}
	
.listTitle02:nth-of-type(2) h2 {
	margin-bottom: 33px;
}
	
#list02 {
	width: 100%;
	margin: 0;
}
	
#list02 ul {
	width: 100%;
	margin-bottom: 0;
	margin-right: 0;
}
	
#list02 ul li {
	float: none;
	width: 100%;
	margin: 0;
	padding: 3%;
}
	
#list02 ul li:nth-of-type(1) {
	padding-bottom: 6%;
}	
#list02 ul li:nth-of-type(1) {
	padding-bottom: 6%;
}
	
#list02 ul.even li:nth-child(even) {
	background-color: #fdfced;
}
	
#list02 ul.even li:nth-child(odd) {
	background-color: #fff;
}
	
#list02 ul.odd li:nth-child(odd) {
	background-color: #fdfced;
}
	
#list02 ul.odd li:nth-child(even) {
	background-color: #fff;
}

#list02 li a:link,
#list02 li a:visited,
#list02 li a:hover,
#list02 li a:active {
	background: url(../../testporocotestgourmettesttest%20-%20Copy/img/shared/arrow.png) no-repeat center right;
	background-size: 17px 31px;
}
	
#list02 ul li a {
	width: 100%;
	height: auto;
}
	
#list02 ul li a img {
	margin-right: 18px;
}
	
#list02 ul li a .leftBox {
	width: 60%;
}
	
#list02 ul li a .leftBox h3 {
	font-size: 15px;
}
	
}
/*-----------------------clearFix*/

.detail:after {
	content: "";
	clear: both;
	display: block;
}