@charset "utf-8";
/* CSS Document */


body{
	margin: 0;
}

.sticky-container{
	margin: 0;
	background-color: #A50021;
}

.sticky-container img{
	display: block;
	line-height: 0;
}

.pc-box{
	display: none;
}

.wrapper{
	width: 100%;
	margin: 0 auto;
	padding-bottom: 3%;
	background-color: #A50021;
}

/*---------- item-list  ----------*/

.item-list {
  list-style: none;
  padding: 0;
	width: 90%;
	margin: 5% auto;
}

.item-list li{
	margin-bottom: 3%;
	 background-color: #000;
	border-radius: 5px;
}

.item-list p {
  margin: 0;
	font-size: .8rem;
	line-height: 1.6;
	text-align: center;
	flex-grow: 1;
}

.item-list a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
	/*justify-content: space-between;*/
	position: relative;
}

/* ★テキスト部分を左詰めにし、画像との間隔を作る */
li a div {
  margin-right: auto; 
}

/* 画像のサイズやレイアウトは共通化 */
.item-list a::before {
  content: "";
  display: inline-block;
  width: 80px;
  aspect-ratio: 500 / 600;
  margin-right: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  flex-shrink: 0;
	margin-left: 0;
	padding-left: 0;
	border-radius: 5px 0 0 5px;
}

/* 各クラスごとに画像URLを指定 */
.item-1 a::before { background-image: url('https://www.dot-st.com/static/docs/nikoand/keyword/261009_christmas/images/img1.jpg'); }
.item-2 a::before { background-image: url('https://www.dot-st.com/static/docs/nikoand/keyword/261009_christmas/images/img2.jpg'); }
.item-3 a::before { background-image: url('https://www.dot-st.com/static/docs/nikoand/keyword/261009_christmas/images/img3.jpg'); }
.item-4 a::before { background-image: url('https://www.dot-st.com/static/docs/nikoand/keyword/261009_christmas/images/img4.jpg'); }
.item-5 a::before { background-image: url('https://www.dot-st.com/static/docs/nikoand/keyword/261009_christmas/images/img5.jpg'); }


@media(min-width:750px){
	.sticky-container{
		display: flex;
		justify-content: center;
		column-gap: 20px;
		background-color: #A50021;
	}
	
	.pc-box{
		position: sticky;
        left: 0;
        top: 0;
        display: flex;
        width: 33%;
        height: 100vh;
        justify-content: center;
        align-items: center;
	}
	
	.pc-box__left img{
		width: 40vh;
	}
	
	.pc-box__right{
		width: 90%;
		margin: 0 auto;
	}
	
	.pc-box__right a{
		display: block;
		width: 60%;
		margin: 0 auto;
		border: solid 1px #000;
		background-color: #fff;
		color: #000;
		text-decoration: none;
		font-size: 1.5rem;
		text-align: center;
		letter-spacing: 1px;
		line-height: 2;
		position: relative;
		font-family: "Arial Narrow", Gadget, "sans-serif";
		font-weight: 600;
	}

		.pc-box__right a:after{
			display: inline-block;
			position: absolute;
			top: 50%;
			right: 5%;
			right: 15px;
			width: 6px;
			height: 6px;
			border-top: 1px solid #282828;
			border-right: 1px solid #282828;
			content: "";
			transform: translateY(-50%) rotate(135deg);
		}
		
	.wrapper{
		width: 36%;
		margin: 0;
		padding: 3% 0;
	}
	
	.item-list {
		width: 100%;
	}

	.item-list p {
		font-size: .98rem;
	}

}