@charset "utf-8";

/* ====================================================================
TOP
==================================================================== */	


/*メインイメージ------------------*/
.mainImg{
    margin:140px auto 0 auto;
	padding: 0 7% 0 7%;
    background: url(../images/top/back_left.png) no-repeat top left, url(../images/top/back_right.png) no-repeat top right;
    background-repeat: no-repeat;
    background-size: auto 540px;
    position: relative;
    top:-20px;
}

.mainImg .single-item h3{
    width: 100%;
    text-align: center;
	position: relative;
}

.mainImg img{
    width: 100%;
    max-width: 1200px;
    margin: 0px auto 0 auto;
    object-fit: cover;
}
.img01 img {object-position:0 50%;}
.img02 img {object-position:0 50%;}
.img03 img {object-position:0 50%;}
.img04 img {object-position:0 50%;}


@media screen and (max-width: 1400px) {
.mainImg{
    background-size: 7.2% auto;
}
}
@media screen and (max-width: 780px) {
.mainImg{
	padding: 0 8% 0 8%;
}
.mainImg{
    background-size: 8.7% auto;
}
}

/*メインイメージ　SP&PC　表示＆非表示---------*/
.slick-slide .pc{
display: inline-block;

}
.slick-slide .sp{
display: none;
}

@media screen and (max-width: 780px) {
.slick-slide .pc{
display: none;
}
.slick-slide .sp{
display: inline-block;
}
}


/* ====================================================================
お知らせ
==================================================================== */	
.section01 {
position: relative;
width: 1200px;
margin: 0px auto 60px auto;
padding: 0 0 0 0;
z-index: 0;
	}
	
.section01 .viewMore{
}
@media screen and (max-width: 1240px) {
.section01 {
  width: 90%;
  margin: 0px 5% 60px 5%;
	}
}
@media screen and (max-width: 980px) {
.section01 {
  width: 92%;
  margin: 0px 4% 40px 4%;
	}
}

.section01 .news{
display: flex;
  gap: 40px; 
}
.section01 .news_box{
float: left;
width: 100%;
display: flex;
}
@media screen and (max-width: 480px) {
  .section01 .news_box {
    display: block;
  }
  .section01 .news_box_left {
    margin-right: 0;
  }
}

/*お知らせ（左マーク）--*/
.section01 .news_box_left{
float: left;
width: 140px;
margin: 5px 40px 0 0;
}
.section01 .news_box_left img{
width: 100%;
margin-right: 10px;
height: auto;
}
@media screen and (max-width: 580px) {
.section01 .news_box_left{
width: 100px;
}
}
@media screen and (max-width: 480px) {
.section01 .news_box_left{
float: none;
width: 100%;
text-align: center;
}
.section01 .news_box_left img{
width: 25%;
float: none;
}
}

/*お知らせ（右）--*/
.section01 .news_box_right {
float: left;
flex: 1; /* 残り全部 */
}
@media screen and (max-width: 480px) {
  .section01 .news_box_right {
    float: none;   
    width: 100%;   
    flex: none;   
}
}
.news_top {
  width: 100%;        /* 横幅いっぱい */
  text-align: right;  /* 右寄せ */
  padding: 15px 0 0 0;
  box-sizing: border-box; /* 念のため */
}

.news_top a {
  display: inline-block; /* 安定して右寄せ */
}


/*お知らせ記事---------------------*/

.section01 .news_title{
font-size: 24px;
}
.section01 .news_title span{
font-size: 13px;
}

.section01 .news .news_txt {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 5px 0px;
}
.section01 .news .day {
	padding: 0px 0px 0px 10px;
	float: right;
	font-size:90%;
	width: 85px;
}
.section01 .news .entry_title{
font-size: 15px;
}

@media screen and (max-width: 980px) {
.section01 .news .day {
	width: 80px;
}
}

.section01 .news ul {
list-style:none;
margin:0;
padding:0;
margin: 0px 10px 0px 0px;
width: 100%;
}

.section01 .news li {
	list-style: none;
	margin: 0px 0 0px 0;
	padding: 15px 0px 5px 0px;
	border-bottom: 1px dotted #CCCCCC;
	width: 100%;
}

.section01 .news :after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.section01 .news a:link {
	color: #577f43;
	text-decoration: none;
}
.section01 .news a:visited {
	color:#577f43;
}
.section01 .news a:hover {
	color: #cccccc;
}



/* ====================================================================
商品トピックス　(連続スライダー)　section02
==================================================================== */	

.section02 {
	width:100%;
	padding:60px 0 60px 0;
	background-repeat: no-repeat;
	background-position: right top;
background-size: 210px;
}

.news1{
	background: #eef4db;
}

@media screen and (max-width: 980px) {
.section02 {
background-size: 22%;
}
}
@media screen and (max-width: 460px) {
.section02 {
	padding:40px 0 40px 0;
}
}
.section02_in {
  margin: 0px auto 10px auto;
  width: 1120px;
}
.slider_2 ul{
padding: 0 0 0 0;
}
.section02_in .title{
font-size: 22px;
margin:  0 0 0px 0;
}
.section02_in .title span{
font-size: 13px;
margin:  0 0 0px 0;
}
.section02_in .subscript{
font-size: 13px;
line-height: 100%;
position: relative;
left: 0px;
letter-spacing: 0.3em;
margin: 0 0 20px 0;
}


@media screen and (max-width: 1180px) {
.section02_in {
  margin: 0px 4% 10px 4%;
  width: 92%;
}
.slider_2 ul{
padding: 0 5px 0 5px;
}
}
@media screen and (max-width: 780px) {
.section02_in {
  margin: 0px 4% 10px 4%;
  width: 92%;
}
.slider_2 ul{
padding: 0 10px 0 10px;
}
}

.section02_in .title{
font-size: 20px;
margin-left: 3px;
}


/*トピックス タイトル＆DAY-----*/
.section02_in .entry_day{
margin: 7px 0 0 0;
font-size: 13px;
line-height: 140%;
}
.new{
font-size: 10px;
font-weight: bold;
background-color: #E50012;
padding: 2px 2px 1px 2px;
margin-left: 4px;
color: #fff;
line-height: 100%;
display: inline-block;
position: relative;
top: -1px;
}

.category{/*カテゴリー名非表示--*/
font-size: 15px;
width: 100%;
font-weight: bold;
line-height: 140%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.section02_in .entry_title{
font-size: 15px;
width: 100%;
line-height: 140%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 3px 0 0 0;
}
@media screen and (max-width: 480px) {
.section02_in .entry_title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
}
.entry_title a:link {
color: #222;
text-decoration: none;
}
.entry_title a:visited { 
color: #222;
text-decoration: none;
}
.entry_title a:active { 
color: #E50012;}
.entry_title a:hover { 
color: #E50012;
}

/*スライダー---------------------------------*/
.section02 .slider{
width:94%;
    margin:0 auto;
}

.section02 .slider img {
   width: 220px;
  height: 220px;
  object-fit: cover;
}
@media screen and (max-width: 1180px) {
.section02 .slider img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
}
.section02 .slider .slick-slide {
    margin:0 10px;
}


/*戻る、次へ矢印の位置------------------------*/
.section02 .slick-prev, 
.section02 .slick-next {
    position: absolute;
    top: 40%;
    cursor: pointer;
  outline: none;
  border: 1px solid #666;
  border-radius: 50%;
    height: 15px;
    width: 15px;
	padding: 5px;
}

.section02 .slick-prev {/*戻る矢印の位置と形状*/
    left: -3.5%;
    transform: rotate(-135deg);
}

.section02 .slick-next {/*次へ矢印の位置と形状*/
    right: -3.5%;
    transform: rotate(45deg);	
}



@media screen and (max-width: 480px) {
.section02 .slick-prev {
    left: -5%;
	top: 30%;
}
.section02 .slick-next {/*次へ矢印の位置と形状*/
    right: -5%;
    top: 30%;
}
}


.section02 .slick-prev::before,.section02 .slick-next::before {
  content: '';
  width: 6px;
  height: 6px;
  border-top: solid 2px #666;
  border-right: solid 2px #666;
  position: absolute;
  left: 7px;
  top: 10px;
}
@media screen and (max-width: 480px) {
.section02 .slick-prev::before {
  width: 5px;
  height: 5px;
  left: 7px;
  top: 9px;
}
.section02 .slick-next::before {
  width: 5px;
  height: 5px;
  left: 7px;
  top: 11px;
}
}



/*ドットナビゲーションの設定--*/
.section02 .slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}
.section02 .slick-dots li {
    display:inline-block;
	margin:0 5px;
}
.section02 .slick-dots button {
    color: transparent;
    outline: none;
    width:8px;
    height:8px;
    display:block;
    border-radius:50%;
    background:#ccc;
}
.section02 .slick-dots .slick-active button{
    background:#333;
}

.viewMore{
  float: right;
  background-color: #577f43;
  color: #FFF;
  font-weight: bold;
  padding: 3px 20px 2px 20px;
  border-radius: 50px;
  font-size: 16px;
  margin: 10px 0 0 0;
}


/* ====================================================================
バナー　section03
==================================================================== */	

.section03 {
width: 100%;
margin: 0px auto 0px auto;
padding: 60px 0 60px 0;
z-index: 0;
	}
.back01{
background-color: #f7f2eb;
}

.section03_in {
  width: 1200px;
  padding: 0px 10px 0px 10px;
  margin: 0px auto 0px auto;
  width: 1120px;
}
.banner_box {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
  justify-content: space-between; /* 左右に振り分け */
  margin-bottom: 0px;
}
.section03 .banner_box img{
width: 100%;
height: auto;
margin: 0
}

.banner_box_left{
width: 46%;
margin: 0 4% 13px 0;
padding-top: 8px;
text-align: center;
}
.banner_box_right{
width: 46%;
margin: 0 0 13px 4%;
padding-top: 8px;
text-align: center;
}
.section03 .box_in{
float: left;
text-align: left;
padding: 2px 10px 0 10px;
line-height: 140%;
}

@media screen and (max-width: 1240px) {
.section03_in {
  width: 90%;
  margin: 0px 5% 0px 5%;
	}
}
@media screen and (max-width: 780px) {
.banner_box_left{
width: 48%;
margin: 0 2% 20px 0;
}
.banner_box_right{
width: 48%;
margin: 0 0 20px 2%;
}
}


@media screen and (max-width: 580px) {
.banner_box_left{
width: 100%;
margin: 0 0 20px 0;
}
.banner_box_right{
width: 100%;
margin: 0 0 20px 0;
}
.section03 .banner_box img{
width: 90%;
height: auto;
margin: 0
}
}
@media screen and (max-width: 380px) {
.section03 .banner_box img{
width: 80%;
height: auto;
margin: 0
}
}