@charset "UTF-8";

.event-top-area{
	width: 850px;
  margin: 0 auto 40px;
}

.event-top-stripe {
	margin: 0 0 20px;
	padding: 0 20px 20px;
	background: url(https://stprodaeonblob.blob.core.windows.net/eshop/assets/common/images/page/20230310009.jpg) repeat-y;
	background-size:100% auto;
}

.event_top-white  {
    background-color: #fff;
}

.lp-link{
	width: 100%;
	display: block;
	margin: 0 auto 20px;
}
.lp-link img{
	width: 100%;
	vertical-align: bottom;
}
.bk-link{
	width: 700px;
	display: block;
	margin: 30px auto 20px;
}
.bk-link img{
	width: 100%;
	vertical-align: bottom;
}
.binner-block{
	width: 100%;
	display: table;
	margin:0;
	padding: 0;
}
.binner-block a{
	display: table-cell;
}
.binner-block img{
	width: 100%;
	vertical-align: bottom;
}
.binner-block02{
	width: 100%;
	display: table;
	margin:0;
}
.binner-block02 a{
	display: table-cell;
}
.binner-block02 img{
	width: 100%;
	vertical-align: bottom;
}
.one-link-banner{
	float: none;
}

.hcw-item-list {
	display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.hcw-item-list li {
	width: 49%;
}
.hcw-item-list li a {
	display: block;
}
.hcw-item-list li img {
	width: 100%;
}

.for-sp{display:none}
.for-pc{display:block;}

@media screen and (max-width: 600px){
	.event-top-area{
		width: 100%;
		margin: 0 auto 10px;
		padding: 0;
	}
	.event-top-stripe {
		width: 100%;
		margin: 0 0 20px;
		padding: 0 20px 20PX;
		background: url(https://stprodaeonblob.blob.core.windows.net/eshop/assets/common/images/page/20230310009.jpg) repeat-y;
		background-size:100% auto;
	}
	.lp-link{
		margin: 0 auto 20px;
		padding: 0 10px;
	}

	.bk-link{
		width: 90%;
		display: block;
		margin: 20px auto 10px;
	}
	
	.binner-block{
		width: 100%;
		display: table;
		margin:0;
		padding: 0;
	}

	.binner-block a{
		display: table-cell;
	}

	.binner-block a:nth-child(1){
		margin-bottom:10px;
	}

	.binner-block a:last-child{
		margin-bottom:0;
	}

	.binner-block a.mid-item{
		margin-bottom:10px;
	}

	.hcw-item-list {
		display: block;
	}
	.hcw-item-list li {
		width: 100%;
	}
	
	.event-info-text{
		width: 95%;
	    padding: 10px 5px;
	    margin: auto;
	    margin-bottom: 15px;
	    font-size: 15px;
	}
	.for-sp{display:block;}
	.for-pc{display:none;}
}



@media screen and (min-width: 600px){

	.binner-block ul {
	  display: table-cell;
	  vertical-align: top;
	} 
  
}



/*---- タイトル・バナー関連 ----*/
.title-main{
	width:100%;
	margin:0 auto;
	padding:0 0 30px;
}
.title-main img{
	width:100%;
	display: block;
	line-height: 0;
}
.title-sub{
	width:100%;
	margin:0 auto 30px;
}
.title-sub img{
	width:100%;
	display: block;
	line-height: 0;
}
.btn-link{
	width: 750px;
	display: block;
	margin: 0 auto;
	padding:20px 0 50px;
}
.btn-link img{
	width: 100%;
	vertical-align: bottom;
}

/*----- カテゴリバナー -----*/
.b-bnr{
	width:100%;
	margin:0 auto 40px;
	padding:10px 0 0 0;
	background-color: #fff;
}
.b-bnr img{
	width:100%;
}
.b-bnr ul{
	width:100%;
	margin:0 auto;
}
.b-bnr li{
	width:415px;
	display: inline-block;
	margin:0 15px 20px 0;
}
.b-bnr li:nth-child(even){
	width:415px;
	display: inline-block;
	margin-right:0;
}

/*---- 商品リンク（横幅いっぱい） ----*/
.banner-block1{
	width: 100%;
	display: block;
	margin:0 auto;
	padding:0;
	line-height: 0;
}
.banner-block1 img{
	line-height: 0;
	width: 100%;
	margin: 0;
	padding: 0;
}

.bg-a .banner-block1,.bg-a .banner-block2,
.bg-b .banner-block1,.bg-c .banner-block1, .bg-c .banner-block2{
	width:calc(100% - 30px);
}

/*---- 商品リンク（50/50） ----*/
.banner-block2{
	width: 100%;
	margin:0 auto;
	padding:0;
}
.banner-block2 li:nth-child(odd){
	width:calc(50% - 10px);
	float: left;
	border:solid 3px #e86851;
	margin-bottom:20px;
}
.banner-block2 li:nth-child(even){
	width:calc(50% - 10px);
	float: right;
	border:solid 3px #e86851;
	margin-bottom:20px;
}
.banner-block2 img{
	width: 100%;
	vertical-align: bottom;
}
.banner-block2::after {
	content: "";
	display: block;
	clear: both;
}

/*---- 背景 ----*/
.item01{
	background-image: url(https://es.aeon-hokkaido.jp/eshop/assets/common/images/page/20201016006.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	padding:289px 0 0;
}
.item07{
	background-image: url(https://es.aeon-hokkaido.jp/eshop/assets/common/images/page/20201016014.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	padding:440px 0 0;
}

.main-content-section .item-list-block{
	margin: 1.5em;
}
.main-content-section .item-list-block li{
	margin: 0 1.5em 0;
	padding: 1.5em 0;
}

/*---- 調整 ----*/
.mt-30{
	margin-top:30px;
}
.mb-40{
	margin-bottom:40px;
}
.for-pc{
	display:block;
}
.for-sp{
	display:none;
}

/*------------ SP要素 ------------*/
@media screen and (max-width: 600px){
	.event-top-area{
		width: 100%;
		margin: 0 auto 20px;
	}
	.title-main {
		width: 100%;
		margin: 0 auto;
		padding:0 0 10px;
	}
	.title-sub {
		width: 100%;
		margin: 0 auto 10px;
	}
	.btn-link{
		width: 100%;
		display: block;
		margin: 0 auto;
		padding:0 10px 30px;
	}
	.bg-nature {
		padding: 20px 10px 0;
	}
	/*---- 商品リンク ----*/
	.banner-block1{
		display: block;
		width: 100%;
		margin: 0 auto;
		padding:0;
	}
	.banner-block img{
		width:100%;
		vertical-align: top;
	}
	.banner-block2 {
    padding: 0 10px;
}
	.banner-block2 li:nth-child(odd) {
    width: 100%;
    float: none;
    margin-bottom: 10px;
}
.banner-block2 li:nth-child(even) {
	width: 100%;
	float: none;
	margin-bottom: 10px;
}

.item01 {
	padding: 65vw 0 0;
}
.item07 {
	padding: 100vw 0 0;
}
	/*---- カテゴリバナー ----*/
	.b-bnr{
		width:100%;
		margin:0 auto 30px;
		padding:0;
		background-color: #fff;
	}
	.b-bnr img{
		width:100%;
	}
	.b-bnr ul{
		width:100%;
		margin:20px auto 0;
	}
	.b-bnr li{
		width:calc(100% - 20px);
		display: block;
		margin:0 auto 5%;
	}
	.b-bnr li:nth-child(even){
		width:calc(100% - 20px);
		display: block;
		margin:0 auto 5%;
	}

/*---- 背景 ----*/
.wrap-block{
	padding:10px;
	margin:0 auto 20px;
}
.inner-block{
	padding:0 0 20px;
}
.product-wrap {
	padding: 5px 0;
}
.bg-a{
	padding: 87vw 5px 10px;
}
.bg-b{
	padding: 80vw 0 0;
	margin-top: -5px;
}
.mb-40{
	margin-bottom:20px;
}
.mt-30{
	margin-top:-30px;
}
	.for-pc{
		display:none;
	}
	.for-sp{
		display:block;
	}
}


/* アコーディオンメニュー */
.event-top-area .accordion {
	/*要素自体は非表示にしておく*/
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/*アコーディオンのスタイリング*/
.event-top-area .tabs {
	display: table;
	width: 100%;
  overflow: hidden;
  border-top:none;
	border-spacing: 1em 0;
}

.event-top-area .tab {
	display: table-cell;
  width: 30%;
  color: white;
  overflow: hidden;
}
.event-top-area .tab-label {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  background: #2c3e50;
  font-weight: bold;
  cursor: pointer;
}
.event-top-area .tab-label:hover {
  background: #1a252f;
}
.event-top-area .tab-label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transition: all .35s;
}

.event-top-area .tab-content {
	display: none;
  max-height: 0;
  padding: 0 1em;
  color: #333;
  background: white;
  transition: all .35s;
}

.event-top-area .tab-close {
	/*閉じるボタン*/
  display: flex;
  justify-content: flex-end;
  padding: 1em;
  font-size: 0.75em;
  background: #2c3e50;
  cursor: pointer;
}
.event-top-area .tab-close:hover {
  background: #1a252f;
}

/*チェックが入ってる時のスタイル*/
.event-top-area .accordion:checked + .tab-label {
  background: #1a252f;
}
.event-top-area .accordion:checked + .tab-label::after {
  transform: rotate(90deg);
}
.event-top-area .accordion:checked ~ .tab-content {
	/*チェックが入ったら開く*/
	display: block;
  max-height: 100vh;
  padding: 1em;
	border-bottom: 1px solid #c5c5c5;
}
@media screen and (max-width: 600px){
	.event-top-area .main-content-section .row{
		padding: 1em;
	}
	.event-top-area .tabs {
		border-spacing: 0;
	}
	.event-top-area .tab{
		display: block;
		width: 100%;
	}
}

@media screen and (min-width: 600px){

	.movie {
       background-color: #e27413;
	   margin: -40px 0 0;
	}

	.movie img{
		width: 100%;
	 }

	.movie-inr {
	  margin: 0 auto 40px;
	  padding: 20px;
	  text-align: center;
	}

}

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

	.movie {
       background-color: #e27413;
	   margin: -20px 0 0;
	}

	.movie img{
		width: 100%;
	 }

	.movie-inr {
	  margin: 0 0 40px;
	  padding: 10px;
	  text-align: center;
	}

}