@charset "UTF-8";
/* (PC版要素) */
.sp-content{
 display: block;
 width:1000px;
 margin:0 auto;
}
.sp-content img{
 width:100%;
}
/* バナー */
.main-bnr{
 width:100%;
 text-align: center;
 line-height: 0;
}
.sp-content h1{
 padding:0;
}
.main-bnr img{
	width:100%;
}
.banner-link{
  display: block;
  margin: 2em auto 5em;
  width: 80%;
}
.banner-link img{
  width: 100%;
  vertical-align: bottom;
}

/* タイトル */
.cat-title{
 margin:45px auto;
 font-size:2em;
 font-weight: bold;
 letter-spacing: 0.1em;
 text-align: center;
}
.cat-title span{
 border-bottom:solid 3px #333;
}
/* テキスト */
.read-text{
 font-size: 1.1em;
 width:100%;
 text-align: center;
 margin:30px auto;
 line-height: 1.6em;
}
/* ページ内リンク */
.menu-btn{
 width:calc(100% - 40px);
 margin:0 auto;
 overflow: hidden;
}
.menu-btn li{
 width:220px;
 border-bottom: solid 4px #848484;
 float:left;
 margin:0 20px 15px 0;
 text-align: center;
 font-size: 1.4em;
 font-weight: bold;
 vertical-align: bottom;
}
.menu-btn li:hover{
 border-bottom: solid 4px rgba(174, 3, 121, 0.7);
}
.menu-btn a{
 display: block;
 padding:30px 0;
}
.menu-btn li.left-item{
  margin: 100px 20px 15px 0;
  float: none;
}
.menu-btn li .two-line{
  padding:20px 0;
}
.menu-btn::after{
 content:"";
 display: block;
 clear: both;
}
.menu-btn span{
 font-size: 0.8em;
}

/* 記事リンク */
.article-link{
 width: calc(100% - 70px);
 margin:0 auto;
}
.article-link li{
 width:450px;
 height: 140px;
 float:left;
 -webkit-box-shadow: 0 0 5px 0 #dfdfdf;
 -moz-box-shadow: 0 0 5px 0 #dfdfdf;
 box-shadow: 0 0 5px 0 #dfdfdf;
 border-radius: 5px;
 overflow: hidden;
 margin-bottom: 30px;
 box-sizing: border-box;
}
.article-link li:nth-child(even){
	margin-left:20px;
 }
.article-link .img{
	width:210px;
	margin:0;
	padding: 0;
	float:left;
}
.article-link img{
	width:100%;
}
.article-link .change-img {
  /* サムネ画像の比率を変更した画像 */
  height: 141px;
}
.article-link .article-ttl{
	width:240px;
	font-weight: bold;
	line-height: 1.4em;
	padding:45px 15px;
	float: right;
}
.article-link:after, .article-link .article-ttl::after{
	content:"";
	display: block;
	clear: both;
}
.btn-link{
	display: block;
	width:600px;
	margin:50px auto 30px;
	background-color: #acacac;
	color: #fff;
	font-size: 2em;
	font-weight: bold;
	letter-spacing: 0.1em;
	padding:25px 0;
	line-height: 1.5em;
	text-align: center;
	position: relative;
	border-radius: 10px;
}
.btn-link:before {
 content: url(https://es.aeon-hokkaido.jp/eshop/assets/common/images/page/20201030001.png);
 position:absolute;
 left:25px;
 top:50px;
}
/* 切り替え */
.for-pc{
	display:block;
 }
 .for-sp{
	display:none;
 }



/* (SP版要素) */
@media screen and (max-width: 600px) {
 .sp-content{
  width: 100%;
  padding-bottom: 10px;
 }
 .for-pc{
  display:none;
 }
 .for-sp{
  display:block;
 }
 .main-bnr{
	text-align: center;
 }
 .sp-content h1{
	font-size:1.8em;
	padding:0;
	line-height: 1.2em;
 }
 .read-text {
	margin: 20px auto;
	padding:0 10px;
	}
	.menu-btn {
    width: calc(100% - 20px);
	}
	.menu-btn li {
    width: calc(50% - 10px);
    margin: 0 0 10px 0;
    font-size: 1em;
	}
	.menu-btn li:nth-child(odd) {
    margin: 0 10px 10px 0;
	}
	.menu-btn a {
    display: block;
    padding: 15px 0;
	}
  .menu-btn li.left-item{
    margin: 8em 0 10px 0;
  }
  .menu-btn li .two-line{
    padding:8px 0;
  }
	.cat-title {
    margin: 20px auto;
		font-size: 1.7em;
		line-height: 1.5em;
	}
	.article-link {
    width: calc(100% - 20px);
		margin: 0 auto;
	}
	.article-link li {
    width: 47%;
		float: left;
		height: 210px;
    -webkit-box-shadow: 0 0 5px 0 #dfdfdf;
    -moz-box-shadow: 0 0 5px 0 #dfdfdf;
    box-shadow: 0 0 5px 0 #dfdfdf;
    border-radius: 5px;
    overflow: hidden;
    display: block;
    margin-bottom: 20px;
	}
  .article-link li:nth-child(even){
    margin-left: 5.5vw;
  }
	.article-link .img{
		width:auto;
		display: block;
		margin:0;
		padding: 0;
		float:none;
	}
	.article-link img {
    width: 100%;
	}
  .article-link .change-img {
    /* サムネ画像の比率を変更した画像 */
    height: 30vw;
  }
	.article-link .article-ttl {
		width:auto;
		display: block;
    padding: 10px 10px;
    line-height: 1.3em;
	}
	.btn-link {
    width: calc(100% - 20px);
    margin: 15px auto 10px;
    font-size: 1.5em;
    padding: 15px 0;
		line-height: 1.5em;
		letter-spacing: 0;
	}
	.btn-link:before {
    content: url(https://es.aeon-hokkaido.jp/eshop/assets/common/images/page/20201030001.png);
    position: absolute;
    left: 10px;
		top: 26px;
		width:20px;
	}
  .banner-link{width: 90%;}
}