@charset "UTF-8";






/* fv
----------------------------*/
#fv {
	padding-top: 120px;
	overflow: hidden;
}
	#fv .swiper-container {
		padding: 0 0 40px 0;
		position: relative;
	}
		#fv .swiper-container a.swiper-slide {
			display: block;
		}
			#fv .swiper-container a.swiper-slide .video-wrap {
				display: block;
				width: 100%;
				height: auto;
				aspect-ratio: 16 / 10.67;
			}
			#fv .swiper-container a.swiper-slide .video-wrap video {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

		#fv .swiper-container .swiper-pagination {
			bottom: 0;
		}
			#fv .swiper-container .swiper-pagination .swiper-pagination-bullet {
				width: 8px;
				height: 8px;
				border-radius: 4px;
				background: #fff;
				border: solid 1px #524D50;
				opacity: 1;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#fv .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
				background: #524D50;
				opacity: 1;
			}
			.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
				margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 12px);
			}
@media screen and (max-width: 767px) {
	#fv {
		padding-top: 90px;
	}
		#fv .swiper-container a.swiper-slide .video-wrap {
			aspect-ratio: 12.8 / 16;
		}
}






/* message
----------------------------*/
#message {
	text-align: center;
}
	#message h2 {
		font-size: 4.2rem;
		font-weight: 500;
		line-height: 1;
		margin-bottom: 50px;
	}

	#message h3 {
		font-size: 2.2rem;
		font-weight: 500;
		line-height: 1.4em;
		margin-bottom: 40px;
	}

	#message .txt {
		line-height: 2.2em;
	}
@media screen and (max-width: 767px) {
	#message h2 {
		font-size: 3.2rem;
		margin-bottom: 30px;
	}

	#message h3 {
		font-size: 1.8rem;
		margin-bottom: 30px;
	}

	#message .txt {
		letter-spacing: 0;
	}
}






/* top-title
----------------------------*/
.top-title {
	text-align: center;
	margin-bottom: 40px;
}
	.top-title h2 {
		font-size: 4.4rem;
		font-weight: 500;
		line-height: 1;
	}
@media screen and (max-width: 1024px) {
	.top-title {
		margin-bottom: 35px;
	}
		.top-title h2 {
			font-size: 4.0rem;
		}
}
@media screen and (max-width: 767px) {
	.top-title {
		margin-bottom: 30px;
	}
		.top-title h2 {
			font-size: 2.8rem;
		}
}






/* topics
----------------------------*/
#topics {
	width: 100%;
	background: #F9F7F6;
	overflow: hidden;
}
	#topics .swiper-container {
		padding: 0 0 40px 0;
		position: relative;
	}
		#topics .swiper-container .swiper-slide .txt {
			margin-bottom: 15px;
		}

		#topics .swiper-container .swiper-pagination {
			bottom: 0;
		}
			#topics .swiper-container .swiper-pagination .swiper-pagination-bullet {
				width: 8px;
				height: 8px;
				border-radius: 4px;
				background: #fff;
				border: solid 1px #524D50;
				opacity: 1;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#topics .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
				background: #524D50;
				opacity: 1;
			}
@media screen and (max-width: 767px) {
	#topics .swiper-container .swiper-slide .txt {
		margin-bottom: 12px;
	}
}






/* item-area
----------------------------*/
.item-area ul.tab li {
	margin-right: 3%;
	border-bottom: solid 1px #ddd;
	font-size: 1.8rem;
	line-height: 1.3em;
	color: #C3C3C3;
	cursor: pointer;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
.item-area ul.tab li:nth-last-child(1) {
	margin-right: 0;
}
.item-area ul.tab li.select {
	border-bottom: solid 1px #221F1D;
	color: #221F1D;
}

.item-area .content {
	margin-top: 50px;
}
	.item-area .content .cell.hide {
		display: none;
	}
		.item-area .content .cell .item-list a.linkbox {
			display: block;
			width: 22.75%;
			margin-right: 3%;
			margin-bottom: 60px;
		}
		.item-area .content .cell .item-list a.linkbox:nth-child(4n) {
			margin-right: 0;
		}
			.item-area .content .cell .item-list a.linkbox .text {
				padding-top: 15px;
				text-align: center;
			}
				.item-area .content .cell .item-list a.linkbox .text h3 {
					font-size: 1.4rem;
					line-height: 1.5em;
					margin-bottom: 5px;
				}

				.item-area .content .cell .item-list a.linkbox .text .price {
					font-size: 1.4rem;
				}
					.item-area .content .cell .item-list a.linkbox .text .price .tax {
						font-size: 1.0rem;
					}
@media screen and (max-width: 1024px) {
	.item-area ul.tab li {
		font-size: 1.6rem;
	}

	.item-area .content {
		margin-top: 50px;
	}
		.item-area .content .cell .item-list a.linkbox {
			margin-bottom: 50px;
		}
}
@media screen and (max-width: 767px) {
	.item-area ul.tab li {
		margin-right: 5%;
		font-size: 1.3rem;
	}

	.item-area .content {
		margin-top: 30px;
	}
		.item-area .content .cell.hide {
			display: none;
		}
			.item-area .content .cell .item-list a.linkbox {
				width: 48%;
				margin-right: 4%;
				margin-bottom: 30px;
			}
			.item-area .content .cell .item-list a.linkbox:nth-child(2n) {
				margin-right: 0;
			}
				.item-area .content .cell .item-list a.linkbox .text {
					padding-top: 12px;
				}
					.item-area .content .cell .item-list a.linkbox .text h3 {
						font-size: 1.3rem;
					}

					.item-area .content .cell .item-list a.linkbox .text .price {
						font-size: 1.3rem;
					}
						.item-area .content .cell .item-list a.linkbox .text .price .tax {
							font-size: 1.0rem;
						}
}






/* series
----------------------------*/
#series {
	overflow: hidden;
}
	#series .side-scroll-list .side-scroll-item {
		background: #F8F8F8;
		margin-bottom: 30px;
	}
	#series .side-scroll-list .side-scroll-item:nth-last-child(1) {
		margin-bottom: 0;
	}
		#series .side-scroll-list .side-scroll-item a.linkbox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px 20px 20px 0;
		}
			#series .side-scroll-list .side-scroll-item a.linkbox .pht {
				width: 40%;
			}

			#series .side-scroll-list .side-scroll-item a.linkbox .text {
				width: 60%;
				padding: 0 6%;
			}
				#series .side-scroll-list .side-scroll-item a.linkbox .text .head {
					font-size: 1.2rem;
					line-height: 1;
					color: #403C3E;
					margin-bottom: 20px;
				}

				#series .side-scroll-list .side-scroll-item a.linkbox .text h3 {
					font-size: 3.0rem;
					line-height: 1.0em;
					margin-bottom: 25px;
				}
					#series .side-scroll-list .side-scroll-item a.linkbox .text h3 span {
						font-size: 2.0rem;
					}

				#series .side-scroll-list .side-scroll-item a.linkbox .text .txt {
					margin-bottom: 35px;
				}

				#series .side-scroll-list .side-scroll-item a.linkbox .text .more {
					display: inline-block;
					background: url("https://chut.itembox.cloud/item/common/img/icon_arrow_black.svg?v=1") no-repeat right center / 13px;
					padding-right: 20px;
					font-size: 1.6rem;
					transition: 0.3s;
					-webkit-transition: 0.3s;
				}
				#series .side-scroll-list .side-scroll-item a.linkbox:hover .text .more {
					padding-right: 25px;
				}

	#series .btn {
		margin-top: 40px;
	}
@media screen and (max-width: 767px) {
	#series .side-scroll-list .side-scroll-item {
		margin-bottom: 20px;
	}
		#series .side-scroll-list .side-scroll-item a.linkbox {
			display: block;
			padding: 20px;
		}
			#series .side-scroll-list .side-scroll-item a.linkbox .pht {
				width: 100%;
			}

			#series .side-scroll-list .side-scroll-item a.linkbox .text {
				width: 100%;
				padding: 15px 10px 25px 10px;
			}
				#series .side-scroll-list .side-scroll-item a.linkbox .text .head {
					font-size: 1.0rem;
					margin-bottom: 10px;
				}

				#series .side-scroll-list .side-scroll-item a.linkbox .text h3 {
					font-size: 2.2rem;
					margin-bottom: 15px;
				}
					#series .side-scroll-list .side-scroll-item a.linkbox .text h3 span {
						font-size: 1.4rem;
					}

				#series .side-scroll-list .side-scroll-item a.linkbox .text .txt {
					margin-bottom: 15px;
				}

				#series .side-scroll-list .side-scroll-item a.linkbox .text .more {
					font-size: 1.4rem;
				}
				#series .side-scroll-list .side-scroll-item a.linkbox:hover .text .more {
					padding-right: 20px;
				}

	#series .btn {
		margin-top: 30px;
	}
}






/* recommend
----------------------------*/
#recommend {
	width: 100%;
	overflow: hidden;
}
	#recommend .swiper-container {
		padding: 0 0 50px 0;
		position: relative;
	}
		#recommend .swiper-container .swiper-slide .text {
			padding-top: 15px;
			text-align: center;
		}
			#recommend .swiper-container .swiper-slide .text h3 {
				font-size: 1.4rem;
				line-height: 1.5em;
				margin-bottom: 5px;
			}

			#recommend .swiper-container .swiper-slide .text .price {
				font-size: 1.4rem;
			}
				#recommend .swiper-container .swiper-slide .text .price .tax {
					font-size: 1.0rem;
				}

		#recommend .swiper-container .swiper-pagination {
			bottom: 0;
		}
			#recommend .swiper-container .swiper-pagination .swiper-pagination-bullet {
				width: 8px;
				height: 8px;
				border-radius: 4px;
				background: #fff;
				border: solid 1px #524D50;
				opacity: 1;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#recommend .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
				background: #524D50;
				opacity: 1;
			}
@media screen and (max-width: 1024px) {
	#recommend .swiper-container {
		padding: 0 0 40px 0;
	}
}
@media screen and (max-width: 767px) {
	#recommend .swiper-container .swiper-slide .text {
		padding-top: 12px;
	}
		#recommend .swiper-container .swiper-slide .text h3 {
			font-size: 1.3rem;
		}

		#recommend .swiper-container .swiper-slide .text .price {
			font-size: 1.3rem;
		}
}






/* guide
----------------------------*/
#guide {
	width: 100%;
	background: #F9F7F6;
	overflow: hidden;
}
	#guide .swiper-container {
		padding: 0 0 40px 0;
		position: relative;
	}
		#guide .swiper-container .swiper-slide {
			display: block;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#guide .swiper-container .swiper-slide:hover {
			opacity: 0.6;
		}
			#guide .swiper-container .swiper-slide .en {
				margin-bottom: 15px;
			}

			#guide .swiper-container .swiper-slide .box {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 30px;
				background: #fff;
			}
				#guide .swiper-container .swiper-slide .box .icon {
					width: 30%;
				}

				#guide .swiper-container .swiper-slide .box .text {
					width: 70%;
					padding-left: 30px;
				}
					#guide .swiper-container .swiper-slide .box .text h3 {
						font-size: 2.4rem;
						font-weight: 500;
						line-height: 1.3em;
						margin-bottom: 8px;
					}

		#guide .swiper-container .swiper-pagination {
			bottom: 0;
		}
			#guide .swiper-container .swiper-pagination .swiper-pagination-bullet {
				width: 8px;
				height: 8px;
				border-radius: 4px;
				background: #fff;
				border: solid 1px #524D50;
				opacity: 1;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#guide .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
				background: #524D50;
				opacity: 1;
			}
@media screen and (max-width: 1024px) {
	#guide .swiper-container .swiper-slide .box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 25px;
		background: #fff;
	}
		#guide .swiper-container .swiper-slide .box .icon {
			width: 25%;
		}

		#guide .swiper-container .swiper-slide .box .text {
			width: 75%;
			padding-left: 25px;
		}
			#guide .swiper-container .swiper-slide .box .text h3 {
				font-size: 2.2rem;
				margin-bottom: 8px;
			}
}
@media screen and (max-width: 767px) {
	#guide .swiper-container .swiper-slide .en {
		margin-bottom: 12px;
	}
	
	#guide .swiper-container .swiper-slide .box {
		display: block;
		padding: 40px 15px;
	}
		#guide .swiper-container .swiper-slide .box .icon {
			width: 50%;
			margin: 0 auto;
		}

		#guide .swiper-container .swiper-slide .box .text {
			width: 100%;
			padding-top: 20px;
			padding-left: 0;
			text-align: center;
		}
			#guide .swiper-container .swiper-slide .box .text h3 {
				font-size: 1.8rem;
				margin-bottom: 10px;
			}
}






/* news
----------------------------*/
#news .news-list a.linkbox {
	display: block;
	width: 23.5%;
	margin-right: 2%;
	background: #fff url("https://chut.itembox.cloud/item/common/img/icon_arrow_black.svg?v=1") no-repeat right 8px bottom 8px / 12px;
	border: solid 1px #ddd;
	padding: 30px;
}
#news .news-list a.linkbox:nth-child(4n) {
	margin-right: 0;
}
#news .news-list a.linkbox:hover {
	background: #F9F7F6 url("https://chut.itembox.cloud/item/common/img/icon_arrow_black.svg?v=1") no-repeat right 8px bottom 8px / 12px;
	border: solid 1px #F9F7F6;
}
	#news .news-list a.linkbox time {
		display: block;
		font-size: 1.4rem;
		line-height: 1;
		margin-bottom: 17px;
	}

#news .link-more {
	position: absolute;
	top: 20px;
	right: 0;
}
	#news .link-more a {
		display: block;
		font-size: 1.2rem;
		line-height: 1;
	}
	#news .link-more a:hover {
		opacity: 0.6;
	}
@media screen and (max-width: 1200px) {
	#news .link-more {
		right: 5%;
	}
}
@media screen and (max-width: 1024px) {
	#news .news-list a.linkbox {
		padding: 25px;
	}
		#news .news-list a.linkbox time {
			font-size: 1.3rem;
			margin-bottom: 15px;
		}

	#news .link-more {
		top: 25px;
	}
		#news .link-more a {
			font-size: 1.1rem;
		}
}
@media screen and (max-width: 767px) {
	#news .news-list {
		display: block;
	}
		#news .news-list a.linkbox {
			width: 100%;
			margin: 0 0 15px 0;
			padding: 25px;
		}
			#news .news-list a.linkbox time {
				font-size: 1.3rem;
				margin-bottom: 15px;
			}

	#news .link-more {
		margin-top: 30px;
		position: static;
	}
		#news .link-more a {
			text-align: center;
		}
}






/* info
----------------------------*/
#info {
	display: none;
}
.modaal-outer-wrapper {
	pointer-events: none;
}
	.modaal-wrapper h3 {
		text-align: center;
	}
	.modaal-wrapper button {
		display: none;
	}

	.modaal-wrapper .txt {
		text-align: center;
		margin-top: 20px;
	}
	.modaal-wrapper a.txtlink {
		display: block;
		pointer-events: auto;
		text-align: center;
	}

	.modaal-wrapper .modaal-close {
		position: static;
		margin-top: 30px;
		margin-bottom: 20px;
	}
		.modaal-wrapper .modaal-close a {
			background: #221F1D none;
			pointer-events: auto;
		}
		.modaal-wrapper .modaal-close a:hover {
			background: #488299;
		}

/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 600px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	display: none;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}