@charset "utf-8";

/* PC用 */
@media screen and (min-width:768px){
	/* メインビジュアル
	-------------------------------------------------- */
	#mainVisual{
		background: url("../img/bgi.jpg") center center no-repeat;
		background-size: cover;
		text-align: center;
		padding: 40px 40px 20px;
		margin-top: 60px;
	}

	#mainVisual img{
		width: 100%;
		max-width: 1242px;
	}

	/* 概要
	-------------------------------------------------- */
	.overview{
		margin-top: 60px;
	}

	.overview p{
		font-size: 32px;
		font-weight: 800;
		text-align: center;
	}

	.overview p span{
		background: -webkit-linear-gradient(transparent 60%, #ffff00 30%);
		background: -o-linear-gradient(transparent 60%, #ffff00 30%);
		background: linear-gradient(transparent 60%, #ffff00 30%);
	}

	.overview .comment{
		font-size: 16px;
		font-weight: 500;
		text-align: center;
		margin-top: 40px;
	}

	.overview .comment br{
		display: none;
	}

	.itemLink{
		display: block;
		box-sizing: border-box;
		margin: 40px auto 0;
		width: 100%;
		max-width: 550px;
		background: #cc0000;
		border-radius: 6px;
		border: 2px solid #cc0000;
		color: #ffffff;
		text-align: center;
		font-size: 16px;
		font-weight: 500;
		text-decoration: none;
		padding: 20px 0;
		transition: 0.2s;
	}

	.itemLink:hover{
		background: #ffffff;
		color: #cc0000;
	}

	/* 商品リスト
	-------------------------------------------------- */
	.itemList{
		display: flex;
		justify-content: space-around;
		width: 100%;
		max-width: 1200px;
		margin: 80px auto 0;
	}

	.itemList a{
		font-size: 18px;
		font-weight: 600;
		color: #000000;
		text-decoration: none;
	}

	.itemList a p{
		margin-top: 15px;
		text-align: center;
	}

	.itemList a p br{
		display: none;
	}

	.itemList a:hover img{
		opacity: 0.8;
	}

	.itemList li:nth-child(1) a:hover p{color: #5ebfc7;}
	.itemList li:nth-child(2) a:hover p{color: #e2a747;}
	.itemList li:nth-child(3) a:hover p{color: #23528e;}

	/* 商品情報
	-------------------------------------------------- */
	#SA{
		background: url("../img/bgi_sa.gif");
		margin: 80px auto 0;
	}

	#AA{
		background: url("../img/bgi_aa.gif");
		margin: 0 auto;
	}

	#BB{
		background: url("../img/bgi_bb.gif");
		margin: 0 auto;
	}

	section{
		padding: 60px 0 80px;
	}

	section h2 .spNone{
		display: block;
		text-align: center;
	}

	section h2 .pcNone{
		display: none;
	}

	.secInner{
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		background: #ffffff;
		border-radius: 20px;
		width: 100%;
		max-width: 1200px;
		margin: 60px auto 0;
		padding: 50px;
	}

	.bagImg{
		width: 50%;
		text-align: center;
	}

	.bagDetail{
		width: 50%;
	}

	.text{
		font-size: 18px;
		font-weight: 600;
		line-height: 1.6em;
	}

	.price{
		font-size: 16px;
		font-weight: 600;
		color: #cc0000;
		margin-top: 30px;
	}

	.btn{
		display: block;
		box-sizing: border-box;
		width: 100%;
		border: 2px solid #cc0000;
		border-radius: 6px;
		transition: 0.2s;
		background: #cc0000;
		color: #ffffff;
		text-align: center;
		margin-top: 30px;
		text-decoration: none;
		padding: 20px 0;
		font-size: 16px;
		line-height: 16px;
		font-weight: 500;
	}

	.btn:hover{
		background: #ffffff;
		color: #cc0000;
	}

	.comment{
		font-size: 14px;
		margin-top: 30px;
		font-weight: 500;
	}

	.gradationWrap{
		box-sizing: border-box;
		padding: 5px;
		border-radius: 20px;
		background: -webkit-linear-gradient(10deg, #926104, #ffffff, #926104);
		background: -o-linear-gradient(10deg, #926104, #ffffff, #926104);
		background: linear-gradient(100deg, #926104, #ffffff, #926104);
		width: 100%;
		max-width: 1200px;
		margin: 50px auto 0;
		position: relative;
		z-index: 5;
	}

	.gradationWrap::before{
		content: "+";
		display: block;
		box-sizing: border-box;
		width: 90px;
		height: 90px;
		border: 4px solid #ffffff;
		font-size: 75px;
		line-height: 75px;
		text-align: center;
		color: #ffffff;
		font-weight: 800;
		background: #5ebfc7;
		position: absolute;
		top: -70px;
		left: 50%;
		margin-left: -45px;
		border-radius: 100%;
		box-shadow: 0 0 5px 0 #2a8b93;
	}

	.bagPrize{
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 15px;
		padding: 40px;
		width: 100%;
	}

	.bagPrize .circle{
		width: 120px;
		height: 120px;
		background: #b06b7c;
		font-size: 34px;
		color: #ffffff;
		line-height: 120px;
		font-weight: 600;
		text-align: center;
		border-radius: 50%;
	}

	.bagPrize .comment{
		margin-top: 0;
		width: 510px;
	}

	.bagPrize .comment p{
		font-size: 18px;
		font-weight: 800;
	}

	.bagPrize .comment p span{
		color: #cc0000;
		font-size: 22px;
	}

	.bagPrize .comment p.tyuui{
		margin-top: 10px;
		font-size: 14px;
		font-weight: 500;
		padding-left: 1em;
		text-indent: -1em;
	}

	.board{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 430px;
	}

	.board span img{
		width: 100%;
	}

	.board span:nth-child(2),
	.board span:nth-child(4){
		margin: 0 15px;
		font-size: 18px;
		font-weight: 600;
		text-align: center;
	}
	
	/* フッター
	-------------------------------------------------- */
	footer{
		display: none;
	}

	.copyright{
		background: #000000;
		color: #ffffff;
		font-size: 14px;
		font-weight: 500;
		text-align: center;
		padding: 10px 0;
	}
}

/* SP用 */
@media screen and (max-width:767px){
	/* メインビジュアル
	-------------------------------------------------- */
	#mainVisual{
		background: url("../img/bgi.jpg") center center no-repeat;
		background-size: cover;
		text-align: center;
		padding: 15px 5px 10px;
		margin-top: 60px;
	}

	#mainVisual img{
		width: 100%;
		max-width: 1242px;
	}

	/* 概要
	-------------------------------------------------- */
	.overview{
		margin: 30px 0 10px;
	}

	.overview p{
		font-size: 16px;
		font-weight: 800;
		text-align: center;
		padding: 0 10px;
		line-height: 1.8em;
	}

	.overview p span{
		background: -webkit-linear-gradient(transparent 60%, #ffff00 30%);
		background: -o-linear-gradient(transparent 60%, #ffff00 30%);
		background: linear-gradient(transparent 60%, #ffff00 30%);
	}

	.overview .comment{
		font-size: 14px;
		line-height: 1.8em;
		font-weight: 500;
		text-align: center;
		margin-top: 30px;
		padding: 0 10px;
	}

	.overview .comment br{
		display: block;
	}

	.itemLink{
		display: block;
		box-sizing: border-box;
		margin: 30px auto 0;
		width: 90%;
		max-width: 550px;
		background: #cc0000;
		border-radius: 6px;
		border: 2px solid #cc0000;
		color: #ffffff;
		text-align: center;
		font-size: 14px;
		font-weight: 500;
		text-decoration: none;
		padding: 15px 0;
		transition: 0.2s;
	}

	.itemLink:hover{
		background: #ffffff;
		color: #cc0000;
	}

	/* 商品リスト
	-------------------------------------------------- */
	.itemList{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		width: 96%;
		max-width: 1200px;
		margin: 40px auto 0;
	}

	.itemList li{
		width: 32%;
		text-align: center;
	}

	.itemList a{
		font-size: 13px;
		font-weight: 600;
		color: #000000;
		text-decoration: none;
	}

	.itemList a img{
		width: 100%;
	}

	.itemList a p{
		margin-top: 10px;
		text-align: center;
	}

	.itemList a:hover img{
		opacity: 0.8;
	}

	.itemList li:nth-child(1) a:hover p{color: #5ebfc7;}
	.itemList li:nth-child(2) a:hover p{color: #e2a747;}
	.itemList li:nth-child(3) a:hover p{color: #23528e;}

	/* 商品情報
	-------------------------------------------------- */
	#SA{
		background: url("../img/bgi_sa.gif");
		margin: 40px auto 0;
	}

	#AA{
		background: url("../img/bgi_aa.gif");
		margin: 0 auto;
	}

	#BB{
		background: url("../img/bgi_bb.gif");
		margin: 0 auto;
	}

	section{
		padding: 30px 20px 40px;
	}

	section h2 .spNone{
		display: none;
	}

	section h2 .pcNone{
		display: block;
		text-align: center;
	}

	section h2 img{
		width: 100%;
	}

	.secInner{
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 20px;
		width: 100%;
		max-width: 1200px;
		margin: 30px auto 0;
		padding: 40px 20px;
	}

	.bagImg{
		width: 100%;
		text-align: center;
	}

	.bagImg img{
		width: 60%;
	}

	.bagDetail{
		width: 100%;
	}

	.text{
		font-size: 14px;
		font-weight: 500;
		line-height: 1.8em;
		margin-top: 20px;
	}

	.price{
		font-size: 16px;
		font-weight: 600;
		color: #cc0000;
		margin-top: 30px;
		text-align: center;
	}

	.btn{
		display: block;
		box-sizing: border-box;
		width: 100%;
		border: 2px solid #cc0000;
		border-radius: 6px;
		transition: 0.2s;
		background: #cc0000;
		color: #ffffff;
		text-align: center;
		margin-top: 30px;
		text-decoration: none;
		padding: 15px 0;
		font-size: 14px;
		line-height: 16px;
		font-weight: 500;
	}

	.btn:hover{
		background: #ffffff;
		color: #cc0000;
	}

	.comment{
		font-size: 14px;
		margin-top: 30px;
		font-weight: 500;
	}

	.gradationWrap{
		box-sizing: border-box;
		padding: 5px;
		border-radius: 20px;
		background: -webkit-linear-gradient(10deg, #926104, #ffffff, #926104);
		background: -o-linear-gradient(10deg, #926104, #ffffff, #926104);
		background: linear-gradient(100deg, #926104, #ffffff, #926104);
		width: 100%;
		max-width: 1200px;
		margin: 30px auto 0;
		position: relative;
		z-index: 5;
	}

	.gradationWrap::before{
		content: "+";
		display: block;
		box-sizing: border-box;
		width: 70px;
		height: 70px;
		border: 4px solid #ffffff;
		font-size: 48px;
		line-height: 58px;
		text-align: center;
		color: #ffffff;
		font-weight: 800;
		background: #5ebfc7;
		position: absolute;
		top: -50px;
		left: 50%;
		margin-left: -35px;
		border-radius: 100%;
		box-shadow: 0 0 5px 0 #2a8b93;
	}

	.bagPrize{
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 15px;
		padding: 30px;
		width: 100%;
	}

	.bagPrize .circle{
		width: 100%;
		height: auto;
		background: #b06b7c;
		font-size: 16px;
		line-height: 15px;
		padding: 10px 0;
		border-radius: 0;
		color: #ffffff;
		font-weight: 600;
		text-align: center;
	}

	.bagPrize .comment{
		margin-top: 0;
	}

	.bagPrize .comment p{
		font-size: 16px;
		font-weight: 800;
		margin-top: 20px;
	}

	.bagPrize .comment p span{
		color: #cc0000;
		font-size: 20px;
		display: block;
	}

	.bagPrize .comment p.tyuui{
		margin-top: 10px;
		font-size: 14px;
	}

	.board{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}

	.board span img{
		width: 100%;
	}

	.board span:nth-child(2),
	.board span:nth-child(4){
		margin: 0 10px;
		font-size: 14px;
		font-weight: 600;
		text-align: center;
	}
	
	/*フッター
	-------------------------------------------------- */
	footer{
		padding: 40px 20px;
		background: #000000;
		margin-top: 80px;
	}

	footer > a{
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		background: #ffffff;
		border-radius: 5px;
		margin-bottom: 20px;
		padding: 15px 20px;
		text-decoration: none;
		font-size: clamp(16px, 1.5vw, 18px);
		color: #333333;
		font-weight: 600;
	}

	footer > a i{
		font-size: 24px;
	}

	.sns{
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		padding: 0 20px;
		margin-top: 40px;
	}

	.sns li{
		width: 18%;
	}

	.sns li a{
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-radius: 100%;
		background: #333333;
		aspect-ratio: 1;
	}

	.sns li a img{height: 60%;}
	.sns li:nth-child(1) a img{height: 50%;}

	.official_app{
		font-size: clamp(16px, 1.5vw, 18px);
		color: #ffffff;
		font-weight: 600;
		margin-top: 40px;
		text-align: center;
	}

	.download{
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	.download a{
		display: block;
		margin: 0 10px;
	}

	.download img{
		width: 100%;
		height: 80px;
		object-fit: contain;
	}

	.copyright{
		background: #333333;
		color: #ffffff;
		font-size: clamp(14px, 1.3vw, 16px);
		text-align: center;
		padding: 10px 0;
	}
}