@charset "utf-8";


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

#sapporo-topicpath-area a:link,
#bodyZoneA a:link,
#sapporo-topicpath-area a:visited,
#bodyZoneA a:visited{
	color: #fbd7a1!important;
}

#sapporo-topicpath-area a:hover,
#bodyZoneA a:hover,
#sapporo-topicpath-area a:active,
#bodyZoneA a:active{
	color: #fbd7a1!important;
	text-decoration: underline!important;
}

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

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

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

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

/*------------------------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: #000;
}

#sapporo-topicpath-area{
	color: #fff!important;
}

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

#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;
}

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

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

.sp{
	display: none;
}

h1:not(.main){
	height: 80px;
	margin-bottom: 32px;
	text-align: center;
}

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

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

.rightBox{
	float: left;
	width: 560px;
	padding-left: 35px;
}

.side{
	float: right;
	width: 470px;
	padding-right: 35px;
	padding-left: 0;
}

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

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

.detail{
	clear: both;
	width: 882px;
	margin: 0 auto 64px;
	padding: 50px 81px 18px;
	color: #fbd7a1;
	border-top: 1px #fff solid;
}

.detail h4{
	padding-bottom: 35px;
	font-size: 20px;
	font-weight: bold;
}

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

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

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

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

.subImage{
	float: right;
	width: 305px;
}

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

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

/*------------------------------list(ssi)*/

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

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

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

#list ul{
	width: 842px;
	margin: 0 auto;
}

#list ul li{
	overflow: hidden;
	float: left;
	width: 396px;
	height: 280px;
}

#list ul li:nth-of-type(2){
	width: 380px;
	margin-left: 50px;
}

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

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

#list ul li .leftBox h3{
	padding-bottom: 20px;
	font-size: 15px;
	font-weight: bold;
	color: #fbd7a1;
}

#list ul li .leftBox p{
	color: #fff;
	font-size: 13px;
	text-decoration: none;
}

#list ul li .leftBox .link{
	width: 130px;
	margin-top: 30px; 
	padding: 8px 8px 8px 27px;
	color: #fbd7a1;
	font-size: 15px;
	text-decoration: none;
	border: 1px #fbd7a1 solid;
	background: url(../img/shared/icon.png) no-repeat 11px center;
}

#list ul li .leftBox .link a{
	display: block;
	width: 100px;
}

.pickUpShop{
	clear: both;
}

#backNumber{
	clear: both;
	width: 900px;
	margin: 0 auto 70px;
}

#backNumber li a{
	padding-left: 15px;
	background: url( ../img/shared/icon.png) no-repeat center left;
}

.backNumber01,
.backNumber02,
.backNumber03,
.backNumber04{
	float: left;
	width: 190px;
	margin-left: 35px;
}
/*------------------------clearFix*/

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


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

.sp{
	display: block;
}
	
.pc{
	display: none;
}
	
img{
	max-width: 100%;
	height: auto;
}
	
h1:not(.main){
	margin-bottom: 29px;
	text-align: center;
}
	
.mainImage{
	padding: 0;
	text-align: center;
}
	
.rightBox{
	margin: 0 5%;
	padding-left: 0;
}
	
.side{
	float: none;
	margin-bottom: 0;
	padding-top: 1px;
	padding-right: 0;
	padding-left: 0;
}
	
.rightBox h2{
	margin: 26px 0 22px;
}
	
.rightBox h3{
	margin: 0 0 22px;
}
	
.rightBox .txt{
	width: 90%;
	padding-bottom: 30px;
	border-bottom: #fff 1px solid;
}
	
.detail{
	width: 100%;
	padding: 33px 5% 20px;
	border: none;
}
	
.detail h4{
	padding-bottom: 20px;
	font-size: 16px;
}

.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: 30px;
	text-align: center;
}
	
.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;
}
	
.listTitle:nth-of-type(1) h2 {
	margin-top: 0;
}
	
#list {
	width: 100%;
	margin: 0;
}
	
#list ul {
	width: 100%;
}
	
#list ul li {
	float: none;
	width: 100%;
	height: 100%;
	padding: 4%;
}

#list ul li:nth-of-type(1){
	border-bottom: 1px #fff solid;
}
	
#list ul li:nth-of-type(2){
	width: 100%;
	margin-left: 0;
}
	
#list ul li {
	padding-bottom: 6%;
}

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

#list ul li a {
	display: block;
	width: 100%;
	height: 125px;
}
	
#list ul li a img {
	margin-right: 18px;
}
	
#list ul li a .leftBox h3 {
	font-size: 15px;
}
	
#list ul li a .leftBox p {
	width: 100%;
}	
	
#backNumber{
	clear: both;
	width: 80%;
	margin: 23px auto 50px;
}
	
#backNumber li{
	margin-bottom: 17px;
}

#backNumber li a{
	padding-left: 20px;
}

.backNumber01,
.backNumber02,
.backNumber03,
.backNumber04{
	float: none;
	width: 100%;
	margin-left: 0;
}

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

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

}

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

h1:not(.main){
	height: 50px;
}

}

/*20240307追記*/

.bold-font{
	font-weight:bold;
}