@charset "UTF-8";


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

	.price {
		font-size: 4.6vw;
		span {
			font-size: 3.6vw;
		}
	}

	.mod-mainContent {
		margin-top: 50px!important;;
	}

	.slider-outer {
		width: calc(var(--slide-w) * 3);
		overflow: hidden;
		margin: 2rem auto 1rem;
		border-radius: var(--border-radius-lg);
	}
	.sliderA {
		display: flex;
		gap: 0;
		width: calc(var(--slide-w) * 8); /* 4枚 × 2セット */
		animation: loop var(--duration) linear infinite;
	}
	.sliderB {
		display: flex;
		gap: 0;
		width: calc(var(--slide-w) * 10); /* 5枚 × 2セット */
		animation: loop var(--duration) linear infinite;
	}
	@keyframes loop {
		0%   { transform: translateX(0); }
		100% { transform: translateX(calc(-1 * var(--slide-w) * 4)); }
	}
	.slide {
		width: 20%;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.title {
		font-size: 5.8vw;
		font-weight: 600;
	}
	.contents_features .title {
		font-size: 4.6vw;
		font-weight: 600;
	}	
	.text {
		.sub {
			font-size: 18px;
		}
	}
	.mb_title_sp {
		margin-bottom: 2vw;
	}
	
	

	.site_link {
		width: 100%;
		padding: 30px 0px;
		line-height: 1;
		font-size: 4vw;
	}

	.row_sale, .row, .row_sale_start, .nami_contents {
		display: inline-block;
		margin: 0 8vw 4vw 8vw;
		width: 84vw;
	}

	
	/* ↓↓↓↓↓↓↓↓↓↓↓↓  TOPブロック ↓↓↓↓↓↓↓↓↓↓↓↓ */
	.top_img_area {
		height: 280vw;
		.img_area {
			position: relative;
			.img1 {
				position: relative;
				width: 100%;
				height: auto;
				z-index: 30;
			}
			.img2 {
				position: absolute;
				width: 80%;
				height: auto;
				bottom: -16vw;
				left: 50%;
				transform: translateX(-50%);
				z-index: 40;
			}
			.img3 {
				position: absolute;
				top: 125vw;
				width: 100%;
				height: auto;
				z-index: 20;
				left: 0;
			}
		}
		.text_area{
			position: absolute;
			text-align: center;
			margin-top: 30vw;
			width: 100%;
			z-index: 40;
			.label{
				font-size: 20px;
				margin-bottom: 20px;
				font-weight: 600;
			}
			.text{
				font-size: 16px;
				text-align :center;
			}
		}
	}
	 
	/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑  TOPブロック ↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */

	.title_main {
		text-align: center;
		width: 100%;
		margin: 0 0 8vw 0;
			.en{
				font-size: 11.4vw;
				font-weight: 900;
			}
			.jp{
				font-size: 16px;
			}
		}
		.contents {
			display: inline-block;
			padding: 0 0 12vw 0;
		}
		.button_area {
			width: 100%;
			text-align: center;
			.btn-purchase {
				width: 60%;
				font-size: 16px;
				line-height: 1;
			}
		}		
	/* ↓↓↓↓↓↓↓↓↓↓↓↓  FEATURESブロック ↓↓↓↓↓↓↓↓↓↓↓↓ */

	.contents_features {
		.contents {
			display: block;
			.row {
				.img1 {
					width: 30%;
					float: left;
				}
				.text_area {
					width: 65%;
					float: left;
					margin-left: 5%;

				}
				.text {
					span {
						margin-top: 10px;
						display: inline-block;
					}
				}
				.img2 {
					width: 100%;
					float: initial;
				}
				
			}
			.row.features2 {
				margin-top: 12vw;
				.img2 {
					margin-top: 8vw;
					display: inline-block;
				}
			}

		}
	}
	/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑  FEATURESブロック ↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */

	.contents_layers {
		
		.contents {
			margin-top: 12vw;
			text-align: center;
			display: block;
			.row {
				.img {
					margin: 4vw auto 6vw auto;
				}
				.text {
					overflow-wrap: break-word;
			        display: block;
					text-align: center;
				}

			}
			.row_bk1 {
				position: relative;
				height: 840vw;
				.nami_contents {
					position: absolute;
				}			
				.layer_img2, .layer_img3, .layer_img4, .layer_img5 {
					position: absolute;
					left: 0;
				}
				.layer1_contents, .layer2_contents, .layer3_contents {
					left: 0;
					.in_row {
						.text {
							width: 65%;
							float: left;
						}
						.in_img {
							width: 30%;
							float: right;
							img {
								width: 100%;
							}
						}
					}
				}	
				.layer_img2, .layer2_contents {
					top: 160vw;
				}
				.layer_img3, .layer3_contents {
					top: 320vw;
				}		
				.layer_img4, .layer4_contents {
					top: 480vw;
				}
				.layer_img5, .layer5_contents {
					top: 660vw;
				}		
				.layer_img1 {
					z-index: 10;
				}
				.layer1_contents {
					top: 0vw;
				}
				.layer_img2 {
					z-index: 20;
				}
				.layer2_contents {
					z-index: 30;
				}
				.layer_img3 {
					z-index: 20;
				}
				.layer3_contents {
					z-index: 30;
				}
				.layer_img4 {
					z-index: 35;
				}
				.layer4_contents, .layer5_contents {
					left: 0;
					z-index: 35;
					.in_img {
						margin-top: 4vw;
					}
				}
				.layer_img5, .layer5_contents {
					z-index: 40;
				}
			}
			.nami_contents {
				.text_area {
					padding-top: 6vw;
					width: 100%;
					text-align: left;
					.in_img {
						img {
							width: 32%;
							float: left;
						}
						.center {
							margin: 0 2% 0 2%;
						}
					}
					margin-top: 4vw;
				}
				.img_area {
					width: 100%;
					margin-top: 4vw;
				}
				label {
					background-color: white;
					padding: 5px 10px;
					font-weight: 600;
					margin-bottom: 0.5vw;
					display: inline-block;
				}
			}
			.layer1_contents, .layer3_contents, .layer5_contents, .layer2_contents, .layer4_contents {
				.text_area, .img_area {
					float: initial;
				}
			}
			.button_area {
				margin-top: 3.8vw; /* 4vw  */
			}
		}
	}
	.contents_tips {
		hr {
			margin-top: 1vw;
		}
		.contents {
			margin-top: 8vw;
			text-align: center;
			display: block;
			.row {
				background-color: #f6f6f6;
				padding: 6vw;
				.text_area {
					width: 100%;
					float: right;
					text-align: left;
					.text {
						margin-top: 2vw;
						display: inline-block;
					}
					.title {
						width: 100%;
						text-align: center;
					}
					ul {
						padding-left: 20px;
						li {
							margin-bottom: 1.5vw;
						}
					}
				}
				.img_area {
					margin: 4vw 0 0vw 0;
					width: 100%;
					float: left;
				}
			}
			.button_area {
				margin-top: 3.8vw; /* 4vw  */
			}
		}
	}
	.contents_cheesecake {
		.contents {
			margin-top: 8vw;
			margin-bottom: 0vw;
			text-align: center;
			display: inline-block;
			.row {
				margin-bottom: 0vw;
				.text_area {
					margin: 4vw 0;
					width: 100%;
					text-align: left;
					.title {
						width: 100%;
					}
					.text {
						border: 2px solid #d2d2d2;
						padding: 4.0vw;
						line-height: 1.6;
						width: 100%;
						span {
							font-size: 80%;
							line-height: 1.6;
							display: block;
						}
					}
				}
				.img_area {
					width: 100%;
				}
			}
		}
		#sale_point {
			width: 100%;
			height:1px;
			margin-top: 0vw;
			display: inline-block;
		}
		.row_sale {
			margin-top: 8vw;
			.text_area {
				display: block;
				.title {
					margin-bottom: 2vw;
				}
				.list {
					text-align: left;
					.li1, .li2, .li3 {
						padding: 10px 5px 10px 15px;
					}
					.li1, .li2 {
						border-top: 1px solid #d2d2d2;
					}
					.li3, .li2 {
						border-bottom: 1px solid #d2d2d2;
					}
				}
			}
		}
		.line {
			padding: 4vw 0;
			width: 80%;
			margin: 0 10%;
		}
		.line hr{
			height: 10px;
			background-color: #f6f6f6;
			border: none;  
		}		
		.button_area {
			margin-top: 3.8vw; /* 4vw  */
		}
		.row_sale_start {
			.hs_logo_area {
				margin-top: 4vw;
				margin-bottom: 3vw;
				border: 2px solid #d2d2d2;
				border-radius: 0.65vw;
				padding: 8vw;
				display: inline-block;
				width: 100%;
				.logo_main {
					margin-bottom: 2vw;
				}
				.brand__paginationList {
					text-align: center;
					width: 100%;
					div.splide__slide {
						width: 11vw;
						height: 11vw;
						float: left;
						margin: 0 10px;
					}
				}
				.splide_1 {
					margin-top: 2.5vw;
					display: inline-block;
				}
				.splide_2 {
					display: inline-block;
					margin-top: 1.5vw;
				}
				.item1, .item4{
					margin: 0!important;
				}
				.item2, .item3{
					margin: 0 2vw 0 4vw!important;
				}
				.item3{
					margin: 0 4vw 0 2vw!important;
				}
				.item5{
					margin: 0 0vw 0 0vw!important;
				}
				.item6 {
					margin: 0 4vw 0 4vw!important;
				}
				.item7{
					margin: 0 0vw 0 0vw!important;
				}

			}
			.hs_how_to_purchase {
				.text_area {
					.step_area {
						display: inline-block;
						.step_row {
							position: relative;
							background-color: #f1efec;
							padding: 6vw 6vw;
							width: 100%;
							display: inline-block;
							label {
								position: absolute;
								top : -18px;
								text-align: center;
								left: 50%;
								transform: translateX(-50%);
								font-size: 18px;
							}
							.img {
								width: 40%;
								height: auto;
								margin-bottom: 1vw;
							}
							.text {
								.step_title {
									margin-top: 1vw;
									margin-bottom: 1vw;
									text-align: center;
									font-size: 3.6vw;
								}
								.step_text {
									text-align: left;
								}
							}
						}
						.step_row.center {
							margin: 8vw 0;
						}
					}
					.title_line {
						margin: 2vw 0 6vw 0;
					}
				}
				.go_hs_area {
					margin: 8vw 0 0 0;
					display: inline-block;
					width: 100%;
					.banner {
						.banner-title {
							font-weight: 600;
							font-size: 4vw;
						}
					}
					.banner::before{
						border-width: 40px 40px 0 0;
					}
				}
			}
		}
	}

	.contents_about {
		.contents {
			margin-top: 8vw;
			text-align: center;
			display: block;
			.row {
				padding: 0vw;
				display: inline-block;
				.text_area {
					.title {
						width: 100%;
						text-align : left;
						font-size: 4vw;
					}
					.text {
						text-align: justify;

					}
					
				}
				.img_area {
					img {
						width: 100%;
						margin-bottom: 2.5vw;
					}
					
				}
			}
		}
		.button_area {
			margin-top: 3.8vw; /* 4vw  */
		}
	}

}

@media (max-width: 440px) {
	.spMin{
		display: block;
	}
}
@media (max-width: 380px) {
	.spMin2{
		display: block;
	}
}