@charset "UTF-8";

.b1{
	font-weight: 300;
}
.b400{
	font-weight: 400!important;
}

.b600{
	font-weight: 600!important;
}

.left{
	text-align:left;
}

.center{
	text-align:center;
}
.left{
	text-align:left;
}
.right{
	text-align:right;
}

.clear{
	clear: both;
	width : 100%;
}
.brand__paginationItem span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  border: 1px solid #d9d9d9;
}
.brand__paginationItem svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.brand__paginationItem.--item-32 span {
	background-image: url("//hokkaido-special.com/cdn/shop/files/kinotoya-logo_3e45b7cc-0344-41d2-a682-6e5cca838822.png?v=1726549726") !important;
}
.brand__paginationItem.--item-48 span {
	background-image: url("//hokkaido-special.com/cdn/shop/files/syunsetsu-logo_03fdcc59-d2d6-489f-8be0-2eaaa2bdfd1a.png?v=1726549715")!important;
}
.brand__paginationItem.--item-49 span {
	background-image: url("//hokkaido-special.com/cdn/shop/files/kinoya-logo_b4dc3138-58c7-44d9-a3f2-ae9b1f68975e.png?v=1726549717")!important;
}	
.brand__paginationItem.--item-50 span {
	background-image: url("//hokkaido-special.com/cdn/shop/files/sensyuan-logo_5e062cc5-b7e7-4d01-a326-d3c36cb0e4a0.png?v=1726549726")!important;
}     	
.brand__paginationItem.--item-51 span {
	background-image: url("//hokkaido-special.com/cdn/shop/files/nbogakko-logo-svg_ad48f047-f911-4dcb-8704-403d7bd8c872.png?v=1726577293")!important;
}
.brand__paginationItem.--item-54 span {
	background-image: url("//hokkaido-special.com/cdn/shop/files/RYOUSHInoCHIKARAMESHI_Logo_data.png?v=1767932523")!important;
}
.brand__paginationItem.--item-37 span {
  background-image: url("//hokkaido-special.com/cdn/shop/files/cw-logo_867e0ef8-8da0-4586-b854-f3a3f23fd81b.png?v=1726577183") !important;
}  
.btn-purchase {
	display: inline-block;
	background: #c39446;
	color: #fff;
	font-size: min(1.4rem, 16px);
	font-weight: 500;
	letter-spacing: 0.5px;
	padding: 20px 0;
	border-radius: 50px;
	text-decoration: none;
	width: 70%;
	text-align: center;
	line-height: 1;
}
.site_link {
	display: inline-block;
	background: black;
	color: #fff;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.5px;
	padding: 20px 40px;
	text-decoration: none;
	text-align: center;
	line-height: 1;
}


.btn-purchase:hover {
  filter: brightness(1.08);
}

.btn-purchase:active {
  filter: brightness(0.95);
}

.go_hs_area .banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #2b2b2b;
  padding: 28px 60px;
  overflow: hidden;
  color: #fff;
}
.go_hs_area .banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 70px 70px 0 0;
  border-color: #c9a84c transparent transparent transparent;
}
.go_hs_area .banner-arrow {
  position: absolute;
  right: 24px;
  bottom: 20px;
  color: #c9a84c;
  font-size: 22px;
}

.contents_tips hr{
	color: #c39446;
	margin: 0.5vw 0 1.5vw 0;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 20px;
  font-weight: 400;
  white-space: nowrap;
  line-height: 1;
}
.section-title::before,
.section-title::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: currentColor;
  color : #f1efec;
}
.red{
  color : #de0000;
}
/* ----------    日本語・英語タイトル  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓  -------------------*/

.section-title {
    text-align: center;
    padding: 20px 0;
}

/* 日本語タイトル */
.ja {
    display: inline-block;
    font-size: 28px;
    font-weight: normal;
    letter-spacing: 0.1em;
	line-height: 1;
}

/* 英語サブタイトル（両サイドに横線） */
.en {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 13px;
    letter-spacing: 0.1em;
    white-space: nowrap;
	line-height: 1;
	margin-bottom: 0.5vw;
	font-weight: 900;
}
/* ----------    日本語・英語タイトル  ↑↑↑↑↑↑↑↑↑↑↑↑↑↑  -------------------*/

li::marker {
	color: #c39446;
}
ul, li {
	list-style-type: decimal;
}

.title {
	font-weight: 600;
}
.text {
	text-justify: inter-ideograph;
	text-align: justify;
	line-height: 2.0;
}
:root {
  --slide-w: 30%;
  --duration: 60s; /* 切替間隔 */
}

.logo {
	width: 80px;
	height: auto;
}
.mod-wrapin-sp {
	text-align: center;
}

li span {
	border-bottom: 1px solid #000000;
	font-weight: 600;

}

.step_title {
	font-weight: 600;
	line-height: 1.4;
}


@media screen and (min-width: 751px)  {

	.mb_title_sp {
		margin-bottom: 20px;
	}
	.sub.mb_title_sp {
		font-weight: 600;
	}

	.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); /* 4枚 × 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: 20px;
	}
	.text {
		font-size: 16px;
		line-height: 1.6;
	}
	
	/* ↓↓↓↓↓↓↓↓↓↓↓↓  TOPブロック ↓↓↓↓↓↓↓↓↓↓↓↓ */
	.top_img_area {
		height: 96vw;
		.img_area {
			position: relative;
			.img1 {
				position: relative;
				width: 100%;
				height: auto;
				z-index: 30;
			}
			.img2 {
				position: absolute;
				width: 48%;
				height: auto;
				bottom: -2vw;
				left: 50%;
				transform: translateX(-50%);
				z-index: 40;
			}
			.img3 {
				position: absolute;
				top: 45vw;
				width: 100%;
				height: auto;
				z-index: 20;
				left: 0;
			}
		}
		.text_area{
			position: absolute;
			text-align: center;
			margin-top: 5vw;
			width: 100%;
			.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 4vw 0;
			.en{
				font-size: 52px;
				font-weight: 600;
			}
			.jp{
				font-size: 16px;
			}			
		}
		.contents {
			display: inline-block;
			padding: 0 0 4vw 0;
		}
		.button_area {
			width: 100%;
			text-align: center;
			.btn-purchase {
				width: 40%;
				font-size: min(1.6rem, 24px);
			}
		}		
	/* ↓↓↓↓↓↓↓↓↓↓↓↓  FEATURESブロック ↓↓↓↓↓↓↓↓↓↓↓↓ */

	.contents_features {
		.contents {
			display: block;
			.row {
				display: inline-block;
				margin: 0 0 4vw 0;
				.img1 {
					width: 15%;
					float: left;
					padding-right: 2.5%;
				}
				.text_area {
					width: 45%;
					float: left;
					padding-right: 5%;

				}
				.img2 {
					width: 40%;
					float: right;				
				}
			}

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

	.contents_layers {
		
		.contents {
			margin-top: 4vw;
			text-align: center;
			display: block;
			.row {
				.img {
					width: 80%;
					margin: 4vw auto 6vw auto;
				}
			}
			.row_bk1 {
				position: relative;
				height: 3220px;
				.nami_contents {
					position: absolute;
				}
				.layer_img2, .layer_img3, .layer_img4, .layer_img5 {
					position: absolute;
					left: 0;
				}
				.layer1_contents, .layer2_contents, .layer3_contents {
					left: 0;	
				
				}
				.layer_img1 {
					z-index: 10;
				}
				.layer1_contents {
					top: 0vw;
				}
				.layer_img2, .layer2_contents {
					top: 640px;
				}
				.layer_img3, .layer3_contents {
					top: 1280px;
				}		
				.layer_img4, .layer4_contents {
					top: 1920px;
				}
				.layer_img5, .layer5_contents {
					top: 2560px;
				}					
				.layer_img2 {
					z-index: 20;
				}
				.layer2_contents {
					z-index: 30;
				}
				.layer_img3 {
					z-index: 20;
				}
				.layer3_contents {
					z-index: 30;
				}
				.layer_img4 {
					z-index: 20;
				}
				.layer4_contents {
					z-index: 30;
				}
				.layer_img5 {
					z-index: 20;
				}
				.layer5_contents {
					left: 0;
					z-index: 30;
				}
			}
			.nami_contents {
				padding: 4vw 4vw;
				.text_area {
					width: 50%;
					text-align: left;
					.in_img {
						width: 100%;
						margin-top: 1.5vw;
						img {
							width: 32%;
							float: left;
						}
						.center {
							margin: 0 2% 0 2%;
						}
					}
				}
				.img_area, .text_area  {
					margin-top: 40px;
				}
				.img_area {
					width: 50%;
					
				}
				label {
					background-color: white;
					padding: 5px 10px;
					font-weight: 600;
					margin-bottom: 0.5vw;
					display: inline-block;
				}
			}
			.layer1_contents, .layer3_contents, .layer5_contents {
				.text_area {
					padding-right: 2vw;
					float: left;
				}
				.img_area {
					float: right;
				}
			}
			.layer2_contents, .layer4_contents {
				.text_area {
					padding-left: 2vw;
					float: right;
				}
				.img_area {
					float: left;
				}

			}
			.button_area {
				margin-top: 3.8vw; /* 4vw  */
			}
		}
	}
	.contents_tips {
		.contents {
			margin-top: 4vw;
			text-align: center;
			display: block;
			.row {
				margin: 0 5%;
				padding: 3vw;
				background-color: #f6f6f6;
				display: inline-block;
				.text_area {
					width: 50%;
					float: left;
					text-align: left;
					padding-right: 2.5vw;
					.title {
						width: 100%;
					}
					ul {
						padding-left: 20px;
						li {
							margin-bottom: 1.5vw;
						}
					}
				}
				.img_area {
					width: 50%;
					float: right;
				}
			}

			.button_area {
				margin-top: 3.8vw; /* 4vw  */
			}
		}
	}
	.contents_cheesecake {
		.sukima {
			margin-right: 14vw;
		}
		.contents {
			margin-top: 4vw;
			margin-bottom: 4vw;
			text-align: center;
			display: inline-block;
			.row {
				padding: 0vw 5vw;
				display: inline-block;
				margin: 0 5%;
				.text_area {
					width: 50%;
					float: right;
					text-align: left;
					padding-left: 2.5vw;
					.title {
						width: 100%;
					}
					.text {
						border: 2px solid #d2d2d2;
						padding: 1.0vw;
						line-height: 1.6;
						width: 100%;
						span {
							font-size: 80%;
							line-height: 1.6;
							display: block;
						}
					}
				}
				.img_area {
					width: 50%;
					float: left;
				}
			}
		}
		.row_sale {
			margin-top: 4vw;
			padding: 0vw 5vw;
			.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;
		}
		.line hr{
			height: 30px;
			background-color: #f6f6f6;
			border: none;  
		}		
		.button_area {
			margin-top: 3.8vw; /* 4vw  */
		}
		.row_sale_start {
			margin: 0 5%;
			.text{
				width: 100%;
			    text-align: center;
			}
			.hs_logo_area {
				width: 100%;
				margin-top: 4vw;
				margin-bottom: 2vw;
				border: 2px solid #d2d2d2;
				border-radius: 0.65vw;
				padding: 2vw;
				display: inline-block;
				.logo_main {
					margin-bottom: 2vw;
				}
				.brand__paginationList {
					text-align: center;
					display: inline-block;
					div.splide__slide {
						width: 4.2vw;
						height: 4.2vw;
						float: left;
						margin: 0 10px;
					}
				}
				.splide_1, .splide_2 {
					display: block;
					float: left;
				}
			}
			.hs_how_to_purchase {
				.text_area {
					.title_line {
						margin: 0 0 2vw 0;
					}
					.step_area {
						display: flex;
						align-items: stretch;
						.step_row {
							position: relative;
							background-color: #f1efec;
							padding: 2vw 2vw;
							width: 32%;
							float: left;
							flex: 1;
							label {
								position: absolute;
								top : -16px;
								text-align: center;
								left: 50%;
								transform: translateX(-50%);
							}
							.img {
								width: 40%;
								height: auto;
								margin-bottom: 1vw;
							}
							.text {
								.step_title {
									margin-bottom: 1vw;
									text-align: center;
								}
								.step_text {
									text-align: left;
								}
							}
						}
						.step_row.center {
							margin: 0 2%;
						}
					}
				}
				
				.go_hs_area {
					margin: 2vw 0;
					display: inline-block;
					width: 100%;
				}
			}
		}
	}

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

					}
					
				}
				.img_area {
					float: left;
					img {
						width: 32%;
					}
					
				}
			}
		}
		.button_area {
			margin-top: 3.8vw; /* 4vw  */
		}
	}

}

@media screen and (min-width: 751px) and (max-width: 1100px) {
	.top_img_area {
		height: 106vw;
	}
}

/* MAX ---------------------------------- */
@media (min-width: 1281px) { 
	/* ↓↓↓↓↓↓↓↓↓↓↓↓  TOPブロック ↓↓↓↓↓↓↓↓↓↓↓↓ */
	.top_img_area .img_area .img3 {
		top: 600px
	}
	.top_img_area {
		height: 96vw;
	    max-height: 1480px;
	}
	.top_img_area .img_area .img2 {
	
	}
	.top_img_area .text_area{
	}
	/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑  TOPブロック ↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
}


��  TOPブロック ↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
}