@charset "utf-8";

/* -----------------------------
	catch-area
-------------------------------- */
.catch-area {
	padding: 100px 0 0;
	display: flex;
	width: 95%;
	margin-left: 5%;
}

.catch-area .img-block {
	width: 40%;
}

.catch-area .img-block img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.catch-area .txt-block {
	width: 60%;
	padding-right: calc( ( 100% - 1200px ) / 2 );
	padding-left: 5%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

.catch-area .txt-block::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 20%;
	right: 10%;
	background: url("../img/brush-deco09.webp") center/cover, no-repeat;
	width: 60%;
	height: initial;
	aspect-ratio: 565 / 160;
	z-index: -1;
	min-width: 565px;
}

.catch-area .txt-block .catch {
	font-size: 4.0rem;
	word-break: keep-all;
}

/*ホバーの指定*/
@media (hover: hover) and (pointer: fine) {
	
}

@media screen and (max-width: 768px){
	.catch-area {
		padding: 20px 20px 0;
		width: 100%;
		margin-left: 0;
		flex-wrap: wrap;
		gap: 25px;
	}
	
	.catch-area .img-block {
		width: 100%;
		height: 50vw;
	}
	
	.catch-area .img-block img {
		height: 100%;
	}
	
	.catch-area .txt-block {
		width: 100%;
		padding-right: 0;
		padding-left: 0;
	}
	
	.catch-area .txt-block .catch {
		font-size: 6.2cqw;
	}
}

/* -----------------------------
	slider-area
-------------------------------- */

.slider-area {
	margin: 100px 0 50px;
}

.slider-area .slider-wrap {
	display: flex;
	align-items: center;
	animation: 40s linear infinite productSlider;
	/*gap: 50px;*/
	width: min-content;
}

.slider-area img {
	height: 200px;
	margin-right: 50px;
}

.slider-area .sujiko {
	height: 150px;
}

@keyframes productSlider {
  100% {
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 768px){
	.slider-area {
		margin: 20px 0;
	}
	
	.slider-area .slider-wrap {
		/*animation: 40s linear infinite productSlider;*/
	}
	
	/*@keyframes productSlider {
	  100% {
		transform: translateX(-550%);
	  }
	}*/
	
	.slider-area img {
		height: 25vw;
		margin-right: 15px;
	}
	
	.slider-area .sujiko {
		height: 20vw;
	}
}

/* ----------------------------------------------------------
	詳細ページ #product.detail
------------------------------------------------------------- */
.product-detail-area {
	margin: 60px 0;
}

.product-detail-area .inner {
	display: flex;
	flex-wrap: wrap;
	gap: 80px;
}

@media screen and (max-width: 768px){
	.product-detail-area {
		margin: 40px 0;
	}
	
	.product-detail-area .inner {
		gap: 20px;
	}
}


/* -----------------------------
	スライダー
-------------------------------- */
.product-slider-block {
	/*width: 50%;*/
	width: 600px;
}

.product-slider-block .slider-wrap {
	gap: 10px;
	display: flex;
	flex-wrap: wrap;
}

.product-slider-block .swiper {
    width: 100%;
}

.swiper-wrapper {
	width: 600px;
}
.main-slider .swiper-slide {
	height: 400px;
}

.main-slider .swiper-zoom-container {
	height: 100%;
}

.swiper-zoom-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thumb-slider.swiper-horizontal {
    width: 100%;
}

.thumb-slider .swiper-slide {
	height: 100px;
}

.thumb-slider .swiper-wrapper {
	display: flex;
	/*gap: 8px;*/
    /*min-width: 600px;*/
}

.thumb-slider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #333;
	/*width: initial!important;
	height: initial!important;*/
	margin-top: 0!important;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	cursor: pointer;
	background: #eee;
	border-radius: 30px;
	width: 50px;
	height: 50px;
}

.swiper-button-prev {
	left: 20px;
}

.swiper-button-next {
	right: 20px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
	font-size: 3.0rem!important;
}

.swiper-button-prev::after {
	content: "\f104";
}

.swiper-button-next::after {
	content: "\f105";
}

/*.product-slider-block .splide__arrow {
	width: 50px;
	height: 50px;
	background: #fff;
}

.product-slider-block .thumb-media {
	
}

.product-slider-block .splide__slide img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	vertical-align: middle;
}

.product-slider-block .splide__track--nav>.splide__list>.splide__slide {
	border: none;
}

.product-slider-block .splide__track--nav>.splide__list>.splide__slide.is-active {
	border: 3px solid #B38732;
}

.product-slider-block .splide-thumb {
	margin: 8px 0 0;
}

.product-slider-block .splide__pagination {
	display: none;
}*/


/*ホバーの指定*/
@media (hover: hover) and (pointer: fine) {
	
}

@media screen and (max-width: 768px){
	.product-slider-block {
		width: 100%;
	}
	
	.main-slider .swiper-slide {
		height: 60vw;
	}
	
	.swiper-button-prev {
		left: 10px;
	}
	
	.swiper-button-next {
		right: 10px;
	}
	
	.swiper-button-next,
	.swiper-button-prev {
		border-radius: 20px;
		width: 40px;
		height: 40px;
	}
	
	.swiper-button-next::after,
	.swiper-button-prev::after {
		font-size: 2.0rem!important;
	}
	
	.thumb-slider .swiper-slide {
		height: 20vw;
	}
}

/* -----------------------------
	スライダー追従
-------------------------------- */
@media screen and (min-width: 769px){
.follow-box {
	position: relative;
	width: 600px;
}

.follow-box.fixed {
    position: fixed;
    top: 150px;
    left: auto;
    z-index: +1;
}
.follow-box.fixed.none {
    opacity: 0;
    z-index: -1;
	}
}

/*ホバーの指定*/
@media (hover: hover) and (pointer: fine) {
	
}

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

/* -----------------------------
	product-txt-block
-------------------------------- */
.product-txt-block {
	width: calc( 100% - 680px );
}

.product-txt-block .tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.product-txt-block .tag-list li {
	font-size: 1.4rem;
	color: var(--gold);
	font-weight: bold;
}

.product-txt-block .tag-list li::before {
	content: "#";
	font-family: var(--en);
}

.product-txt-block .comment {
	font-size: 1.4rem;
	font-weight: bold;
	background: var(--beige);
	padding: 20px;
	margin: 20px 0 0;
}

.product-txt-block .name {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.7;
	margin: 20px 0 0;
}

.product-txt-block .price {
	font-size: 1.5rem;
	margin: 10px 0 0;
	font-weight: bold;
}

.product-txt-block .price-num {
	font-size: 3.6rem;
}

.product-txt-block .period {
	font-weight: bold;
	background: #FBF6F6;
	padding: 6px 15px;
	margin: 10px 0 0;
	border-left: 3px solid var(--enji);
	color: var(--enji);
}

.product-txt-block .period-ttl {
	margin-right: 10px;
	font-size: 1.4rem;
}

.product-txt-block .period-date {
	font-size: 1.7rem;
}

.product-txt-block .status {
	color: #4EA6D4;
	border: 2px solid #4EA6D4;
	display: inline-block;
	font-weight: bold;
	padding: 5px 8px;
	font-size: 1.4rem;
	margin: 20px 0 0;
    font-weight: bold;
}

.product-txt-block .status.room {
    color: #d2a05c;
    border-color: #d2a05c;
}

.product-txt-block .status.cold {
    color: #5CD2B6;
    border-color: #5CD2B6;
}

.product-txt-block .status i {
	margin-right: 3px;
}

.product-txt-block .description {
	margin: 20px 0 0;
}

.product-txt-block .form-wrap {
	margin: 40px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.product-txt-block .quantity-box {
	display: flex;
	gap: 20px;
	align-items: center;
}

.product-txt-block .quantity {
	font-size: 1.8rem;
	font-weight: bold;
}

.product-txt-block select {
	padding: 10px 20px;
	font-size: 1.8rem;
	border-radius: 0;
	cursor: pointer;
	border-color: #ccc;
}

.product-txt-block select:active,
.product-txt-block select:focus{
	border: 1px solid var(--gold);
}

.product-txt-block .cart-btn {
	display: block;
	flex-grow: 1;
	background: var(--online);
	border: none;
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	padding: 25px 20px;
	border-radius: 50px;
	cursor: pointer;
	transition: all .3s;
}

.product-txt-block .cart-btn i {
	margin-right: 5px;
}

.product-txt-block .product-table {
	margin: 30px 0 0;
	width: 100%;
	border-collapse: collapse;
}

.product-txt-block .product-table th {
	padding: 15px 15px 15px 0;
	text-align: left;
	width: 30%;
	line-height: 1.7;
	vertical-align: text-top;
	border-bottom: 1px solid #eee;
}

.product-txt-block .product-table td {
	padding: 15px;
	width: 70%;
	line-height: 1.7;
	border-bottom: 1px solid #eee;
}

.product-txt-block .btn-ec {
	width: 100%;
	margin: 40px 0 0;
}

.product-txt-block .btn-ec a {
	display: block;
	padding: 20px;
	border: 1px solid #ccc;
	border-radius: 40px;
	width: 100%;
	text-align: center;
	position: relative;
}

.product-txt-block .btn-ec a::after {
	content: "\f08e";
	position: absolute;
	top: 50%;
	right: 40px;
	transform: translateY(-50%);
	font-size: 1.8rem;
	color: #aaa;
}

.product-txt-block .btn-eat {
	margin: 40px 0 0;
}

.product-txt-block .btn-eat a {
	/*display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2.0rem;
	font-weight: bold;
	border: 1px solid var(--enji);
	color: var(--enji);
	padding: 20px;
	position: relative;*/
	display: block;
	box-shadow: 5px 5px 0 #ECE9DF;
	position: relative;
	border-radius: 5px;
}

.product-txt-block .btn-eat a::after {
	/*content: "\f08e";
	position: absolute;
	top: 50%;
	right: 40px;
	transform: translateY(-50%);
	font-size: 1.8rem;
	color: var(--enji);*/
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: url("../img/arrow-orange.svg") center/cover, no-repeat;
	width: 40px;
	height: initial;
	aspect-ratio: 51 / 8;
	transition: all .4s;
}

.product-txt-block .btn-eat img {
	width: 100%;
	object-fit: cover;
	border-radius: 5px;
}

/*ホバーの指定*/
@media (hover: hover) and (pointer: fine) {
	.product-txt-block .cart-btn:hover {
		opacity: .7;
	}
	
	.product-txt-block .btn-ec a:hover {
		background: var(--enji);
		color: #fff;
	}
	
	.product-txt-block .btn-ec a:hover::after {
		color: #fff;
	}
	.product-txt-block .btn-eat a:hover {
		/*opacity: .8;*/
		box-shadow: none;
		transform: translate(5px,5px);
	}
	.product-txt-block .btn-eat a:hover::after {
		right: -8px;
	}
}

@media screen and (max-width: 768px){
	.product-txt-block {
		width: 100%;
	}
	
	.product-txt-block .name {
		font-size: 2.0rem;
	}
	
	.product-txt-block .quantity-box {
		width: 100%;
	}
	
	.product-txt-block select {
		padding: 15px 25px;
	}
	
	.product-txt-block .product-table th {
		padding: 15px 0 0;
		text-align: left;
		width: 100%;
		display: block;
		border-bottom: none;
	}
	
	.product-txt-block .product-table tr:first-child th {
		padding: 0;
	}
	
	.product-txt-block .product-table td {
		padding: 5px 0 15px;
		width: 100%;
		display: block;
	}
	
	.product-txt-block .btn-ec {
		width: 100%;
		margin: 20px 0 0;
	}
	
	.product-txt-block .btn-eat {
		margin: 20px 0 0;
	}
}

/* -----------------------------
	product-free-block
-------------------------------- */
.product-free-block {
	background: var(--beige);
	padding: 60px;
}

/*ホバーの指定*/
@media (hover: hover) and (pointer: fine) {
	
}

@media screen and (max-width: 768px){
	.product-free-block {
		padding: 20px;
		margin: 20px 0 0;
	}
}

/* -----------------------------
	〇〇〇
-------------------------------- */

/*ホバーの指定*/
@media (hover: hover) and (pointer: fine) {
	
}

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