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


#fs_Top {
	padding-top: 0 !important;
}



/* mainimages
----------------- */
#mainimages {
	width: 100%;
	height: 700px;
}
	#mainimages .swiper-slide {
		display: block;
		width: 100%;
		height: 700px;
		position: relative;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	#mainimages a.swiper-slide:hover {
		opacity: 0.7;
	}
		#mainimages .swiper-slide .head {
			font-size: 5.0rem;
			letter-spacing: 0.15em;
			line-height: 76px;
			color: #fff;
			text-align: center;
			padding-top: 310px;
		}
		#mainimages .swiper-slide .img_txt {
			width: 600px;
			text-align: center;
			margin: auto;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			-webkit- transform: translateY(-50%) translateX(-50%);
		}
		#mainimages .swiper-slide .img_txt.hatsunari_w {
			width: 900px;
		}
		#mainimages .swiper-slide .concept {
			margin-top: 40px;
		}

		#mainimages .swiper-slide .link {
			width: 160px;
			margin: 40px auto 0 auto;
		}
			#mainimages .swiper-slide .link a {
				display: block;
				height: 46px;
				font-size: 1.2rem;
				color: #fff;
				line-height: 46px;
				text-align: center;
				background: #FFAF00 url("https://hikarimiso.itembox.cloud/item/img/icon_arrow_white.png") no-repeat 92% center / 15px;
				border-radius: 28px;
			}

	#mainimages .swiper-pagination-bullet {
		background: none;
		border: solid 1px #fff;
		opacity: 1.0;
	}
	#mainimages .swiper-pagination-bullet-active {
		background: #fff;
	}






/* topics
----------------- */
#topics {
	width: 100%;
	padding-top: 150px;
}
	#topics .text {
		width: 340px;
	}
		#topics .text .title {
			padding-bottom: 40px;
		}

		#topics .btn {
			position: absolute;
			top: 250px;
			left: 0;
		}


	#topics .newslist {
		width: -webkit-calc(100% - 340px);
		width: calc(100% - 340px);
	}
		#topics .newslist .box {
			margin-bottom: 30px;
		}
		#topics .newslist .box:nth-last-child(1) {
			margin-bottom: 0;
		}
			#topics .newslist .box a .pht {
				width: 230px;
				overflow: hidden;
				border-radius: 0 0 20px 0;
			}
				#topics .newslist .box a .pht img {
					-moz-transition: -moz-transform 0.2s linear;
					-webkit-transition: -webkit-transform 0.2s linear;
					-o-transition: -o-transform 0.2s linear;
					-ms-transition: -ms-transform 0.2s linear;
					transition: transform 0.2s linear;
				}
				#topics .newslist .box a:hover .pht img {
					-webkit-transform: scale(1.05);
					-moz-transform: scale(1.05);
					-o-transform: scale(1.05);
					-ms-transform: scale(1.05);
					transform: scale(1.05);
				}


			#topics .newslist .box a .text {
				width: -webkit-calc(100% - 260px);
				width: calc(100% - 260px);
				border-top: solid 1px #ddd;
				border-bottom: solid 1px #ddd;
				padding-top: 30px;
				padding-right: 70px;
				background: url("https://hikarimiso.itembox.cloud/item/img/btn_arrow.png") no-repeat right 10px center / 40px;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#topics .newslist .box a:hover .text {
				background: url("https://hikarimiso.itembox.cloud/item/img/btn_arrow.png") no-repeat right 5px center / 40px;
			}
				#topics .newslist .box a .text h3 {
					font-size: 2.2rem;
					line-height: 1.4em;
					color: #262626;
					padding-bottom: 10px;
				}

				#topics .newslist .box a .text .txt {
					color: #262626;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}






/* product
----------------- */
#product {
	width: 100%;
	padding-top: 150px;
}
	#product .title {
		max-width: 1200px;
		margin: auto;
	}


	#product .tabbox {
	}
		#product .tabbox .tab {
			width: 700px;
			position: absolute;
			top: 20px;
			right: 4%;
		}
			#product .tabbox .tab li {
				width: 31%;
				border-bottom: solid 3px #ddd;
				font-size: 1.8rem;
				line-height: 1.1em;
				text-align: center;
				padding-bottom: 15px;
				cursor: pointer;
			}
			#product .tabbox .tab li:nth-child(2),
			#product .tabbox .tab li:nth-child(3) {
				padding-top: 10px;
			}
			#product .tabbox .tab li.select {
				color: #FFAF00;
				border-bottom: solid 3px #FFAF00;
				position: relative;
			}
			#product .tabbox .tab li.select:before {
				content: "";
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 10px 10px 0 10px;
				border-color: #ffae00 transparent transparent transparent;
				position: absolute;
				bottom: -10px;
				left: 50%;
				margin-left: -10px;
			}
				#product .tabbox .tab li span {
					font-size: 1.2rem;
				}


		#product .tabbox .content .hide {
		}
			#product .tabbox .content .swiper-slide {
				width: 100%;
			}
				#product .tabbox .content .swiper-slide .pht {
					width: 50%;
					min-height: 500px;
					border-radius: 0 0 100px 0;
				}

				#product .tabbox .content .swiper-slide .text {
					width: 50%;
					padding: 5% 4% 0 4%;
				}
					#product .tabbox .content .swiper-slide .text .number {
						font-size: 1.4rem;
						color: #FFAF00;
						margin-bottom: 10px;
						position: relative;
					}
					#product .tabbox .content .swiper-slide .text .number:before {
						content: "";
						width: 40px;
						height: 1px;
						background: #FFAF00;
						position: absolute;
						top: 50%;
						left: 126px;
						margin-top: -1px;
					}

					#product .tabbox .content .swiper-slide .text h3 {
						font-size: 2.6rem;
						line-height: 1.4em;
						margin-bottom: 15px;
					}

					#product .tabbox .content .swiper-slide .text .txt span {
						font-size: 1.2rem;
					}

					#product .tabbox .content .swiper-slide .text .btn {
						padding-top: 50px;
						margin: 0;
					}

	
	#product .swiper-pagination {
		text-align: right;
		top: 0;
		left: auto;
		right: 4%;
		bottom: auto;
	}
		#product .swiper-pagination-bullet {
			width: 40px;
			height: 40px;
			background: #fff;
			border: solid 2px #ddd;
			opacity: 1.0;
			position: relative;
		}
		#product .swiper-pagination-bullet:before {
			width: 40px;
			font-family: 'Montserrat', sans-serif;
			font-weight: 600;
			color: #C7C7C7;
			text-align: center;
			line-height: 38px;
			text-indent: -5px;
			letter-spacing: 0;
			position: absolute;
			top: 0;
			left: 0;
		}
		#product .swiper-pagination-bullet:nth-child(1):before {
			content: "01";
		}
		#product .swiper-pagination-bullet:nth-child(2):before {
			content: "02";
		}
		#product .swiper-pagination-bullet:nth-child(3):before {
			content: "03";
		}
		#product .swiper-pagination-bullet:nth-child(4):before {
			content: "04";
		}
		#product .swiper-pagination-bullet:nth-child(5):before {
			content: "05";
		}
		#product .swiper-pagination-bullet-active {
			border: solid 2px #FFAF00;
		}
		#product .swiper-pagination-bullet-active:before {
			color: #FFAF00;
		}






/* ranking
----------------- */
#ranking {
	width: 100%;
	padding-top: 150px;
	padding-bottom: 150px;
}
	#ranking .biglist {
		margin-bottom: 50px;
	}
		#ranking .biglist .item {
			width: 31%;
			position: relative;
		}
		#ranking .biglist .item:nth-child(4) {
			display: none;
		}

		#ranking .biglist .item:before {
			content: "";
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 60px 60px 0 0;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
		#ranking .biglist .item:nth-child(1):before {
			border-color: #c1b27d transparent transparent transparent;
		}
		#ranking .biglist .item:nth-child(2):before {
			border-color: #EBEBEB transparent transparent transparent;
		}
		#ranking .biglist .item:nth-child(3):before {
			border-color: #9F7821 transparent transparent transparent;
		}

		#ranking .biglist .item::after {
			font-family: 'Montserrat', sans-serif;
			font-size: 2.0rem;
			font-weight: 600;
			position: absolute;
			top: 0;
			left: 14px;
			z-index: 2;
		}
		#ranking .biglist .item:nth-child(1):after {
			content: "1";
			color: #fff;
		}
		#ranking .biglist .item:nth-child(2):after {
			content: "2";
			color: #262626;
		}
		#ranking .biglist .item:nth-child(3):after {
			content: "3";
			color: #fff;
		}


		#ranking .morelist .item {
			width: 23%;
			position: relative;
		}
		#ranking .morelist .item:nth-child(5) {
			display: none;
		}
		#ranking .morelist .item:before {
			content: "";
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 40px 40px 0 0;
			border-color: #969696 transparent transparent transparent;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
		#ranking .morelist .item:after {
			font-family: 'Montserrat', sans-serif;
			font-size: 1.6rem;
			font-weight: 600;
			color: #fff;
			position: absolute;
			top: 0;
			left: 5px;
			z-index: 2;
		}
		#ranking .morelist .item:nth-child(1):after {
			content: "4";
		}
		#ranking .morelist .item:nth-child(2):after {
			content: "5";
		}
		#ranking .morelist .item:nth-child(3):after {
			content: "6";
		}
		#ranking .morelist .item:nth-child(4):after {
			content: "7";
		}
			#ranking .item a {
				display: block;
			}
				#ranking .item a .pht {
					border: solid 1px #ddd;
					border-radius: 10px;
					overflow: hidden;
				}
					#ranking .item a .pht img {
						-moz-transition: -moz-transform 0.2s linear;
						-webkit-transition: -webkit-transform 0.2s linear;
						-o-transition: -o-transform 0.2s linear;
						-ms-transition: -ms-transform 0.2s linear;
						transition: transform 0.2s linear;
					}
					#ranking .item a:hover .pht img {
						-webkit-transform: scale(1.05);
						-moz-transform: scale(1.05);
						-o-transform: scale(1.05);
						-ms-transform: scale(1.05);
						transform: scale(1.05);
					}

				#ranking .item a h3 {
					min-height: 50px;
					padding-top: 16px;
					margin-bottom: 18px;
					font-size: 1.8rem;
					line-height: 1.5em;
					color: #3E3A39;
				}
				#ranking .morelist .item a h3 {
					font-size: 1.6rem;
				}

				#ranking .item a .price {
					font-size: 1.2rem;
					color: #3E3A39;
					line-height: 1;
				}
					#ranking .item a .price span {
						font-size: 2.2rem;
					}
					#ranking .morelist .item a .price span {
						font-size: 2.0rem;
					}






/* column
----------------- */
#column {
	width: 100%;
	padding-bottom: 150px;
}
	#column .tabbox {
		padding-bottom: 50px;
	}
		#column .tabbox .tab {
			width: 100%;
		}
			#column .tabbox .tab li {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 32.3%;
				border-bottom: solid 3px #ddd;
				font-size: 1.6rem;
				line-height: 1.2em;
				text-align: center;
				height: 60px;
				cursor: pointer;
			}
			#column .tabbox .tab li.select {
				color: #FFAF00;
				border-bottom: solid 3px #FFAF00;
				position: relative;
			}
			#column .tabbox .tab li.select:before {
				content: "";
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 10px 10px 0 10px;
				border-color: #ffae00 transparent transparent transparent;
				position: absolute;
				bottom: -10px;
				left: 50%;
				margin-left: -10px;
			}


	#column .tabbox .content {
		padding-top: 50px;
	}
		#column .tabbox .content .hide {
			display: none;
		}
			#column .tabbox .content .cell .box {
				width: 23.5%;
				margin-right: 2%;
			}
			#column .tabbox .content .cell .box:nth-child(4) {
				margin-right: 0;
			}
				#column .tabbox .content .cell .box a {
					display: block;
				}
					#column .tabbox .content .cell .box a .pht {
						overflow: hidden;
						border-radius: 0 0 30px 0;
					}
						#column .tabbox .content .cell .box a .pht img {
							-moz-transition: -moz-transform 0.2s linear;
							-webkit-transition: -webkit-transform 0.2s linear;
							-o-transition: -o-transform 0.2s linear;
							-ms-transition: -ms-transform 0.2s linear;
							transition: transform 0.2s linear;
						}
						#column .tabbox .content .cell .box a:hover .pht img {
							-webkit-transform: scale(1.05);
							-moz-transform: scale(1.05);
							-o-transform: scale(1.05);
							-ms-transform: scale(1.05);
							transform: scale(1.05);
						}

					#column .tabbox .content .cell .box a .days {
						font-size: 1.3rem;
						line-height: 1;
						color: #8E8E8E;
						padding: 16px 0 8px 0;
					}

					#column .tabbox .content .cell .box a h3 {
						font-size: 1.4rem;
						line-height: 1.6em;
						color: #3E3A39;
					}






/* instagram
----------------- */
#instagram {
	width: 100%;
	padding-top: 150px;
}
	#instagram .title {
		max-width: 1200px;
		margin: auto;
	}

	#instagram .btn {
		position: absolute;
		top: 10px;
		right: 0;
	}


	#instagram .instagram-photo-block {
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
		#instagram .instagram-photo-block .instagram-js-based {
			width: 20%;
			padding: 0;
		}






/* 1260px */
@media screen and (max-width: 1260px) {






/* topics
----------------- */
#topics .btn {
	left: 5%;
}






/* product
----------------- */
#product .title {
	max-width: 90%;
}

#product .tabbox .tab {
	width: 550px;
	right: 5%;
}

#product .tabbox .content .swiper-slide .text {
	padding: 5% 5% 0 5%;
}






/* instagram
----------------- */
#instagram .btn {
	right: 5%;
}







}

	







/* max 1023px */
@media screen and (max-width: 1023px) {






/* mainimages
----------------- */
#mainimages {
	width: 100%;
	height: 500px;
	margin-top: 100px;
}
	#mainimages .swiper-slide {
		width: 100%;
		height: 500px;
	}
		#mainimages .swiper-slide .head {
			font-size: 2.3rem;
			line-height: 40px;
			padding-top: 200px;
		}
		#mainimages .swiper-slide .img_txt {
			width: 90%;
			max-width: 300px;
			text-align: center;
			margin: auto;
		}
		#mainimages .swiper-slide .img_txt.hatsunari_w {
			max-width: 92%;
		}

		#mainimages .swiper-slide .link {
			margin-top: 30px;
		}

	#mainimages .swiper-pagination-bullet {
		width: 12px;
		height: 12px;
	}






/* topics
----------------- */
#topics {
	padding-top: 80px;
}
#topics .inner {
	display: block;
}
	#topics .text {
		width: 100%;
	}
		#topics .text .title {
			padding-bottom: 40px;
		}
	
	
		#topics .text .txt {
			display: none;
		}

		#topics .btn {
			position: static;
		}


	#topics .newslist {
		width: 100%;
	}
		#topics .newslist .box {
			margin-bottom: 20px;
		}
		#topics .newslist .box:nth-last-child(1) {
			margin-bottom: 40px;
		}
			#topics .newslist .box a .pht {
				width: 40%;
				border-radius: 0 0 30px 0;
			}

			#topics .newslist .box a .text {
				width: 57%;
				padding-top: 0;
				padding-right: 0;
				border: none;
				background: none;
			}
			#topics .newslist .box a:hover .text {
				background: none;
			}
				#topics .newslist .box a .text h3 {
					font-size: 1.8rem;
					padding-bottom: 5px;
				}






/* product
----------------- */
#product {
	padding-top: 80px;
}
	#product .tabbox {
	}
		#product .tabbox .tab {
			width: 90%;
			margin: auto;
			position: static;
		}
			#product .tabbox .tab li {
				width: 32%;
				font-size: 1.4rem;
				line-height: 1.2em;
				border: solid 2px #ddd;
				padding-top: 12px;
				padding-bottom: 10px;
			}
			#product .tabbox .tab li:nth-child(2) {
				padding-top: 12px;
			}
			#product .tabbox .tab li:nth-child(3) {
				padding-top: 20px;
			}
			#product .tabbox .tab li.select {
				border: solid 2px #FFAF00;
			}
				#product .tabbox .tab li span {
					font-size: 1.0rem;
					letter-spacing: 0;
				}


		#product .tabbox .content {
			padding-top: 30px;
		}
			#product .tabbox .content .swiper-container {
				padding-bottom: 0;
			}
			#product .tabbox .content .swiper-slide {
				width: 100%;
				display: block;
			}
				#product .tabbox .content .swiper-slide .pht {
					width: 95%;
					min-height: 250px;
					border-radius: 0 0 60px 0;
				}

				#product .tabbox .content .swiper-slide .text {
					width: 100%;
					padding: 5%;
				}
					#product .tabbox .content .swiper-slide .text .number {
						font-size: 1.2rem;
					}
					#product .tabbox .content .swiper-slide .text .number:before {
						width: 15px;
						left: 110px;
					}

					#product .tabbox .content .swiper-slide .text h3 {
						font-size: 2.0rem;
					}

					#product .tabbox .content .swiper-slide .text .txt span {
						font-size: 1.0rem;
					}

					#product .tabbox .content .swiper-slide .text .btn {
						padding-top: 30px;
						margin: auto;
					}

	
	#product .swiper-pagination {
		top: 260px;
	}
		#product .swiper-pagination-bullet {
			width: 30px;
			height: 30px;
		}
		#product .swiper-pagination-bullet:before {
			width: 30px;
			font-size: 1.2rem;
			line-height: 27px;
			text-indent: -4px;
		}






/* ranking
----------------- */
#ranking {
	padding-top: 80px;
	padding-bottom: 80px;
}
	#ranking .biglist {
		margin-bottom: 0;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
		#ranking .biglist .item {
			width: 48%;
			margin-right: 4%;
			margin-bottom: 30px;
		}
		#ranking .biglist .item:nth-child(2n) {
			margin-right: 0;
		}
		#ranking .biglist .item:nth-child(4) {
			display: block;
		}

		#ranking .biglist .item:before {
			border-width: 40px 40px 0 0;
		}
		#ranking .biglist .item:nth-child(4):before {
			border-color: #969696 transparent transparent transparent;
		}

		#ranking .biglist .item::after {
			font-size: 1.6rem;
			left: 6px;
		}
		#ranking .biglist .item:nth-child(4):after {
			content: "4";
			color: #fff;
		}


	#ranking .morelist {
		margin-bottom: 0;
		display: none;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
		#ranking .morelist .item {
			width: 48%;
			margin-right: 4%;
			margin-bottom: 30px;
		}
		#ranking .morelist .item:nth-child(3),
		#ranking .morelist .item:nth-child(5) {
			margin-right: 0;
		}
		#ranking .morelist .item:nth-child(1) {
			display: none;
		}
		#ranking .morelist .item:nth-child(5) {
			display: block;
		}
		#ranking .morelist .item:nth-child(5):after {
			content: "8";
		}
			#ranking .item a h3 {
				padding-top: 10px;
				margin-bottom: 18px;
				font-size: 1.5rem;
				text-align: left;
				line-height: 1.5em;
				color: #3E3A39;
			}

			#ranking .item a .price {
				font-size: 1.0rem;
			}
				#ranking .item a .price span {
					font-size: 1.8rem;
				}
				#ranking .morelist .item a .price span {
					font-size: 1.8rem;
				}


	#ranking .subbtn {
		width: 60%;
		margin: auto;
	}
		#ranking .subbtn .close {
			display: none;
		}
		#ranking .subbtn a {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 56px;
			font-size: 1.4rem;
			color: #FFAF00;
			border: solid 2px #FFAF00;
			border-radius: 30px;
			position: relative;
		}
		#ranking .subbtn a:before {
			content: "";
			width: 20px;
			height: 1px;
			background: #FFAF00;
			position: absolute;
			top: 50%;
			right: 15px;
			margin-top: -0.5px;
		}
		#ranking .subbtn a:after {
			content: "";
			width: 1px;
			height: 20px;
			background: #FFAF00;
			position: absolute;
			top: 50%;
			right: 25px;
			margin-top: -10px;
		}
		#ranking .subbtn .close a:after {
			display: none;
		}






/* column
----------------- */
#column {
	padding-bottom: 80px;
}
	#column .tabbox .tab li {
		font-size: 1.4rem;
	}






/* instagram
----------------- */
#instagram {
	padding-top: 80px;
	padding-bottom: 80px;
}
	#instagram .title {
		max-width: 100%;
	}

	#instagram .btn {
		padding-top: 30px;
		position: static;
	}


	#instagram .instagram-photo-block {
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
		#instagram .instagram-photo-block .instagram-js-based {
			width: 33.3333333%;
			padding: 0;
		}
		#instagram .instagram-photo-block .instagram-js-based:nth-child(10) {
			display: none;
		}







}

	







/* max 1023px */
@media screen and (max-width: 767px) {






/* column
----------------- */
#column .tabbox {
	padding-bottom: 10px;
}
	#column .tabbox .tab {
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
		#column .tabbox .tab li {
			width: 32%;
			border: solid 2px #ddd;
			font-size: 1.3rem;
			line-height: 1.2em;
			/*height: 50px;
			margin-right: 2%;*/
			margin-bottom: 12px;
            padding: 10px 0 10px;
		}
    /*
		#column .tabbox .tab li:nth-child(2n) {
			margin-right: 0;
		}
    */
		#column .tabbox .tab li.select {
			color: #FFAF00;
			border: solid 3px #FFAF00;
			position: relative;
		}
		#column .tabbox .tab li.select:before {
			content: "";
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10px 10px 0 10px;
			border-color: #ffae00 transparent transparent transparent;
			position: absolute;
			bottom: -10px;
			left: 50%;
			margin-left: -10px;
		}


#column .tabbox .content {
	padding-top: 20px;
}
	#column .tabbox .content .cell .list {
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
		#column .tabbox .content .cell .box {
			width: 48%;
			margin-right: 4%;
			margin-bottom: 20px;
		}
		#column .tabbox .content .cell .box:nth-child(2n) {
			margin-right: 0;
		}
			#column .tabbox .content .cell .box a .days {
				font-size: 1.2rem;
			}

			#column .tabbox .content .cell .box a h3 {
				font-size: 1.3rem;
			}







}