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

#lp_{
	margin: 0 auto 150px;
	width: 1120px;
	/*background-color: antiquewhite;*/
	color: #444;
}

#lp_ .frame_{
	margin: auto;
	width: 1000px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

#lp_ img{
	width: 100%;
}

#lp_ .credit{
	font-family: serif;
	font-size: 1.6rem;
	font-weight: bold;
	margin: 4% auto 15%;
	text-align: center;
}

#lp_ .credit a{
	text-decoration: underline;
}


#lp_ .cooperation_{
	width: 100%;
	margin: 30px 0 0;
	text-align: center;
	font-size:1.5rem;
	line-height:2.2;
	font-family: serif;
}

  .coupon-attention{
        background-color: #595757;
        padding: 10px;
        width: 400px;
        margin: 20px auto 60px;
    }
    .coupon-attention a{
        display: block;
        color: #fff;
        font-size: 15px;
        text-decoration: none;
        text-align: center;
    }

/* -----------------------------------------------
フェードインの動きの大きさ設定
-------------------------------------------------- */
@keyframes fadeInUpsmall{
	0%{opacity:0;transform:translate3d(0,10%,0)}
	to{opacity:1;transform:none}
}
.fadeInUpsmall{	animation-name:fadeInUpsmall}

@keyframes fadeInDownsmall{
	0%{opacity:0;transform:translate3d(0,-10%,0)}
	to{opacity:1;transform:none}
}
.fadeInDownsmall{animation-name:fadeInDownsmall}

@keyframes fadeInRightsmall{
	0%{opacity:0;transform:translate3d(10%,0,0)}
	to{opacity:1;transform:none}
}
.fadeInRightsmall{animation-name:fadeInRightsmall}

@keyframes fadeInLeftsmall{
	0%{opacity:0;transform:translate3d(-10%,0,0)}
	to{	opacity:1;transform:none}
}
.fadeInLeftsmall{animation-name:fadeInLeftsmall}

/* -----------------------------------------------
フェードインの動きの大きさ設定
-------------------------------------------------- */


.title_{
	margin: 50px auto 0;
	width: 500px;
/*	background-color: antiquewhite;*/
}

.title_ p{
	color: #757575;
	font-size: 4.4rem;
	margin: -6px 0 0 5px;
	letter-spacing: 0.8rem;
	text-align: center;
}

.conttitle_{
	margin: 50px auto 0;
	padding: 5px 0;
	background-color: #c59087;
}

.conttitle_ p { 
	color: #fff;
	text-align: center;
	font-size: 2.5rem !important;
	letter-spacing: 0.1rem;
}

.period_{
	margin: 20px auto 30px;
}

.period_ img{
	display: block;
	margin: auto;
	width: 450px !important;
}

.period_ p{
	margin: 3px auto 0;
	font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
	text-align: center;
}

.conttext_{
	width: 90%;
	text-align: left;
    line-height: 1.6;
    font-size: 1.5rem;
	margin: 20px auto 0;
}

.brandlist_{
	margin: 20px 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px 30px;
}

.brandlist_ .item_{
	width: 230px;
}

.bz_btn{
	width: 300px;
	margin:  40px auto 0;
}

.bz_btn p{
	text-align: center;
	padding: 20px;
	border: 1px solid;
	font-size: 1.5rem;
}

#lp_ li{
	margin: auto;
	width: 90%;
	list-style:inside;
	text-indent: -1.4em;
    padding-left: 1.5em;
	line-height: 1.6;
    font-size: 1.5rem;
}

.conttext_ a{
	text-decoration: underline !important;
	color: #568a2c;
}

#lp_ .brandtitle_{
  width: 80%;
  background-color: #e6e5dc;
  text-align: center;
  margin: 30px auto 0;
}
#lp_ .brandtitle_ p{
	font-family: source-sans-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
  letter-spacing: 0.5rem;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 6px;
  color: #393637;
}

#lp_ .brandlist_{
	display: flex;
	flex-wrap: wrap;
	gap: 50px 40px; 
	justify-content: center;
	margin: 30px auto ;
	letter-spacing: 0;
	width: 800px;
}
#lp_ .brandlist2_{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px; 
	justify-content: center;
	margin: 30px auto 80px;
	letter-spacing: 0;
/*	width: 900px;*/
}

#lp_ .item{
	width: 250px;
}

#lp_ .item2_{
	width: 218px;
}

#lp_ .btn_{
	margin: 60px auto 0;
	width: 340px;
	padding: 21.5px 20px 20px;
	border: 1px solid #575757;
	background-color: #ffffff;
	font-size:1.4rem;
	text-align: center;
	color: #575757;
}
#lp_ .btn_:hover{
	 opacity: 0.6;
}


@media (max-width: 599px) {
	#lp_{
		letter-spacing: 0.13rem;
		margin: 30px auto 80px;
		width: 100%;
		max-width: 599px;
		min-width: 300px;
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	}
	
	#lp_ .frame_{
		
		margin: auto;
		width: 100%;
	}
	
	.title_{
		margin: 40px auto 0;
		width: 80%;
	}
	
	.title_ p{
		font-size: 1.65rem;
		letter-spacing: 0.3rem;
	}
	
	.conttitle_{
		margin: 40px auto 0;
		padding: 7px;
	}
	
	.conttitle_ p { 
		font-size: 1.1rem !important;
	}
	
	.period_{
		width: 90%;
	}
	
	.period_ img{
		display: block;
		margin: auto;
		width: 340px !important;
	}

	.period_ p{
		margin: 0px auto 0;
		font-size: 16px;
        width: 75%;
		letter-spacing: 0.05rem;
	}
	
	.conttext_{
		width: 93%;
		text-align: left;
		line-height: 1.5;
		font-size: 0.8rem;
		margin: 15px auto 0;
	}
	
	.brandlist_{
		margin: 15px 0 0;
		gap: 10px 10px;
	}

	.brandlist_ .item_{
		width: 30%;
	}
	
	.bz_btn{
		width: 55%;
		max-width: 250px;
		margin:  30px auto 0;
	}

	.bz_btn p{
		padding: 15px;
		font-size: 0.8rem;
	}
	
	#lp_ li{
		width: 93%;
		text-indent: -1.4em;
		padding-left: 1.5em;
		line-height: 1.5;
		font-size: 0.8rem;
	}
    

  #lp_ .brandtitle_{
    width: 100%;
    margin: 20px auto 0;
  }
  #lp_ .brandtitle_ p{
font-family: source-sans-pro, sans-serif;
font-weight: 700;
font-style: normal;
    font-size: 0.99rem;
    padding: 4px;
    letter-spacing: 0.2rem;
  }
	#lp_ .brandlist_{
		gap: 21px; 
		justify-content: center;
		margin: 15px auto ;
		width: 100%;
	}	
	#lp_ .brandlist2_{
		gap: 10px 20px; 
		justify-content: center;
		margin: 20px auto 40px;
		width: 100%;
	}
	#lp_ .item{
	width: 45%;
}

#lp_ .item2_{
	width: 44%;
}

	#lp_ .btn_{
		margin: 30px auto 50px;
		width: 250px;
		padding: 18px;
		font-size:0.8rem;
	}
    
        .coupon-attention{
        background-color: #595757;
        padding: 7px;
        width: 87%;
        margin: 20px auto 60px;
    }
    .coupon-attention a{
        display: block;
        color: #fff;
        font-size: 4vw;
        line-height: 1.3;
        text-decoration: none;
    }

}