/*
Theme Name: 札幌ホテルヤマチ
Theme URI: https://www.s-hotelyamachi.co.jp/
*/

/*------------------------------------------
header
------------------------------------------*/
header{
	height:400px;
	background:url(images/main.jpg)  top center no-repeat;
	position: relative;}

@media (max-width: 640px) {

header{
	margin:55px 0 0 0;
	height: 0;
    padding-top: 46.875%; 
    background: url(images/main_sp.jpg) 0 0 no-repeat;
    background-size: cover;}
}
.sp_btm_menu header{
	margin:0;
}

/*------------------------------------------
#blog
------------------------------------------*/


/*右側記事一覧*/
#blog_list{
	width:830px;
	float:right;}

#blog_list ul li{
	background:url(images/bg.png) right center no-repeat;
	border-bottom:solid #CCCCCC 1px;}

#blog_list ul li dl{
	padding:20px 0;}

#blog_list ul li dl:hover{
	opacity:0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;}

#blog_list ul li:first-child dl{
	padding:0 0 15px 0;}


#blog_list ul li dl dt {
	float:left;
    position: relative;
    width: 145px;}

#blog_list ul li dl dt:before {
    content:"";
    display: block;
    padding-top: 60%; /* 高さを幅の75%に固定 */}

#blog_list ul li dl dt span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	overflow:hidden;}

#blog_list ul li dl dd{
	width:665px;
	float:right;}

#blog_list ul li dl dd h4{
	color:#11173F;
	font-size:1.4rem;}

#blog_list ul li dl dd h4 span{
	display:inline-block;
	font-size:1.3rem;
	background-color:#A2AD16;
	color:white;
	padding:0px 15px;
	margin:0 0 5px 5px;}
#blog_list ul li dl dd h4 span:nth-of-type(1){
	margin:0 0 5px 15px;}
#blog_list ul li dl dd h4 p{
	color:#4A4541;
	font-size:1.5rem;
	padding-right:40px;}

.attachment-post-thumbnail{
	width:100%;
	height:auto;}

#blog_list ul li.none{
	background:none !important;
	border-bottom:none !important;}

/*左側メニュー*/
#blog_menu{
	width:260px;
	float:left;}

#blog_menu .box_brown{
	border:solid #DDD8CE 5px;
	background-color:white;}

#blog_menu .box_brown h4{
	font-family: "Sawarabi Mincho", serif;
	background-color:#7F6644;
	color:white;
	text-align:center;
	font-size:1.6rem !important;
	padding:5px 0;}

#blog_menu .box_brown ul{
	margin:15px;}

#blog_menu .box_brown ul li{
	color:#11173F;
	border-bottom:solid #CCCCCC 1px;
	padding:0 0 5px 0;
	margin:0 0 5px 0}

#blog_menu .box_brown ul li:last-child{
	border-bottom:none;
	padding:0 0 0 0;
	margin:0 0 0 0}

#blog_menu .box_brown ul li a{
	color:color:#333858 !important;}

#blog_menu  #category{
	margin:0 0 30px 0;}

/*ブログ記事*/
#blog_contents{
	width:830px;
	float:right;}

#blog_contents  h4{
	padding:20px 0px;
	margin:0 0 40px 0;
	text-align:left;
	color:#11173F;
	font-size:1.4rem;
	border-top:solid #CCCCCC 1px;
	border-bottom:solid #CCCCCC 1px;}

#blog_contents h4 span{
	display:inline-block;
	font-size:1.3rem;
	background-color:#A2AD16;
	color:white;
	padding:0px 15px;
	margin:0 0 5px 5px;}
#blog_contents h4 span:nth-of-type(1){
	margin:0 0 5px 15px;}
#blog_contents h4 span:last-of-type{
	margin-right:15px;}
#blog_contents h4 p{
	display:inline;
	color:#4A4541;
	font-size:1.5rem;}

#blog_contents .blog_inner{
	margin:0 50px;}

#blog_contents .blog_inner .yoko_narabi{
	display: flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items: flex-start;
	gap:0 30px;
}

#blog_contents .blog_inner img{
	margin:0 0 30px 0;}

#blog_contents .blog_inner a{
	font-weight:bold;
	color:#7F6644 !important;
	}

/*pager*/
#blog_list .wp-pagenavi,
#blog_contents .wp-pagenavi_single {
	text-align:center;
	margin-top:70px;}
#blog_list .wp-pagenavi ul.page-numbers{
	display: flex;
	justify-content: center;
}
#blog_list .wp-pagenavi ul.page-numbers li{
	background:none;
	border-bottom:none;
}

#blog_list .wp-pagenavi a,
#blog_contents .wp-pagenavi_single a,
#blog_list .wp-pagenavi span {
	text-decoration: none !important;
	border: 1px solid #11173F;
	padding:5px 12px;
	margin: 3px;
	color:#11173F;
	background-color:white;}

#blog_list .wp-pagenavi span.current,
#blog_contents .wp-pagenavi_single span.current {
	background-color:#11173F;
	border: 1px solid #11173F;
	color:white;}


@media (max-width: 640px) {
	#blog_list{
		width:100%;
		float:none;}

	#blog_list ul li{
		background:none;}

	#blog_list ul li dl{
		padding:20px 0 15px 0;}

	#blog_list ul li:first-child dl{
		padding:0 0 15px 0;}

	#blog_list ul li dl dt {
		width:40%;}

	#blog_list ul li dl dt:before {
		padding-top: 70%; /* 高さを幅の70%に固定 */}

	#blog_list ul li dl dd{
		width:60%;}

	#blog_list ul li dl dd h4{
		padding:0 0 0 15px;}
	#blog_list ul li dl dd h4 span:nth-of-type(1) {
		margin: auto;
	}
	#blog_list ul li dl dd h4 span{
		display:inline-block;
		font-size:1.3rem;
		background-color:#A2AD16;
		color:white;
		padding:0px 15px;
		margin:0 0 5px 0;}

	#blog_list ul li dl dd h4 p{
		padding:0;}

	/*ブログ記事*/
	#blog_contents{
		width:100%;
		float:none;}

	#blog_contents  h4{
		padding:10px 0px;
		margin:0 0 30px 0;}

	#blog_contents .blog_inner{
		margin:0;}

	#blog_contents .blog_inner img{
		margin:0 auto 30px;}
	#blog_contents .blog_inner .yoko_narabi{
		flex-direction: column;
		align-content: center;
		align-items: center;
	}
	/*左側メニュー*/
	#blog_menu{
		width:100%;
		float:none;}

	#blog_menu  #category{
		margin:30px 0 20px 0;}

	/*pager*/
	#blog_list .wp-pagenavi {
		text-align:center;
		margin-top:30px !important;}

	#blog_list .wp-pagenavi a, #blog_list .wp-pagenavi span {
		text-decoration: none !important;
		border: 1px solid #11173F;
		padding: 2px 7px;
		margin:3px;
		color:#11173F;
		background-color:white;}

	#blog_list .wp-pagenavi span.current {
		background-color:#11173F;
		border: 1px solid #11173F;
		color:white;
		padding: 2px 7px !important;
		margin:3px !important;}

	#blog_contents .wp-pagenavi_single {
		text-align:center;
		margin-top:35px;}

	#blog_contents .wp-pagenavi_single a, #blog_list .wp-pagenavi span {
		text-decoration: none !important;
		border: 1px solid #11173F;
		padding:10px 15px;
		margin: 3px;
		color:#11173F;
		background-color:white;}

	#blog_contents .wp-pagenavi_single span.current {
		background-color:#11173F;
		border: 1px solid #11173F;
		color:white;}

}


/************************************
** 折り畳みアーカイブウィジェット
************************************/
.widget_archive a.year{
  cursor: pointer;
}
 
.widget_archive .years ul {
  -webkit-transition: .3s ease;
  transition: .3s ease;
  margin: 0;
  margin-bottom: 1em;
}
 
#sidebar .widget_archive ul.years li{
  margin-bottom: 0;
}
 
.widget_archive ul.years .hide {
  margin: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
}