/* KV修正SP */
@media only screen and (max-width: 767px) {
img[src*="/assets/images/home/img_hero02.png"]{
    position: absolute;
	inset: 0 !important;   
	object-fit:cover !important;
	object-position: 80% 100% !important;
}
}



/* 以下ブログ用でCSS追加あれば追記すること */

/* margin-top */
.mt-10{
	margin-top:1rem !important;
}
.mt-15{
	margin-top:1.5rem !important;
}
.mt-20{
	margin-top:2rem !important;
}
.mt-25{
	margin-top:2.5rem !important;
}
.mt-30{
	margin-top:3rem !important;
}
.mt-35{
	margin-top:3.5rem !important;
}
.mt-40{
	margin-top:4rem !important;
}
.mt-45{
	margin-top:4.5rem !important;
}
.mt-50{
	margin-top:5rem !important;
}

/* margin-bottom */
.mb-10{
	margin-bottom:1rem !important;
}
.mb-15{
	margin-bottom:1.5rem !important;
}
.mb-20{
	margin-bottom:2rem !important;
}
.mb-25{
	margin-bottom:2.5rem !important;
}
.mb-30{
	margin-bottom:3rem !important;
}
.mb-35{
	margin-bottom:3.5rem !important;
}
.mb-40{
	margin-bottom:4rem !important;
}
.mb-45{
	margin-bottom:4.5rem !important;
}
.mb-50{
	margin-bottom:5rem !important;
}

/* .blog_ol内リンク */
.blog_ol a {
	color:#000;
}

/* tetx-align */
.tx-l{
	text-align:left;
}
.tx-c{
	text-align:center;
}
.tx-r{
	text-align:right;
}

/* blogのリンク追加 */
.blog-link {
position: relative;
    padding: 1.5rem 8rem;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 
ease-in-out .3s;
	opacity:1;
	display:inline-block;
}

/* blogの右リンク画像修正系 */
.blog-sub__recImg img,
.blog-sub__popImg img{
  width: 100% !important;
  height: 30vh !important;
  max-width: none !important;
}

/* ブログでの店主の声*/
.blog-ownerVoice {
  margin-top: 40px;
  padding: 24px;
  background: #fafafa;            /* 全体にうっすいグレー */
  border-left: 4px solid #c9a86a; /* ちょい高級感（宝船の色味と相性良） */
  border-radius: 6px;
}

.blog-ownerVoice h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #333;
  font-weight: 600;
}

.blog-ownerVoice p {
  margin: 0 0 10px;
  line-height: 1.7;
}


/* =====================================================
   ブログ系サムネ hover演出（PCのみ）
   非hover：grayscale(80%)
   hover：カラー表示
   ===================================================== */

@media (hover: hover) and (pointer: fine) {
	
	.blog-link:hover {
		opacity:0.8;
	}

  /* =====================================================
     ① ブログ一覧ページ（/blog/）
     サムネ：.blog-innerItem__img
     ===================================================== */
.blog-innerItem__img img {
    filter: grayscale(100%);
    transition: filter 0.3s ease, transform 0.3s ease;
  }

.blog-innerItem__img a:hover img,
.blog-innerItem__img:hover img {
    filter: grayscale(0%);
    transform: scale(1.03);
  }


 /* =====================================================
   ブログ詳細 右カラム
   hover は a タグに当たる構造対応（body指定なし）
   ===================================================== */
	.blog-sub a:hover{
		opacity:1;
	}
.blog-sub__recImg,
	.blog-sub__popImg {
		overflow:hidden;	
	}
	
.blog-sub__recImg img,
.blog-sub__popImg img {
  filter: grayscale(100%);
  transform: scale(1); /* ← これ超重要 */
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* hover は a に当たる前提 */
a:hover .blog-sub__recImg img,
a:hover .blog-sub__popImg img {
  filter: grayscale(0%);
  transform: scale(1.03);
}



  /* =====================================================
     ③ TOPページ下部のブログサムネ
     サムネ：.home-blogItem__img
     ===================================================== */
.home-blogItem__img img {
    filter: grayscale(100%);
    transition: filter 0.3s ease, transform 0.3s ease;
  }

.home-blogItem__img a:hover img,
.home-blogItem__img:hover img {
    filter: grayscale(0%);
    transform: scale(1.03);
  }
	
	

}

.blog-innerItem__img img {
	max-width:100% !important;
}

.blog-img::after {
  content: "";
  display: block;
  clear: both;
}