/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
@white:#ffffff;
@black:#191919;
@l_black:#333333;
@gray:#d9d9d9;
@l_gray:#eeeeee;
@d_gray:#777777;
@dd_gray:#555555;
@red:#d85656;
@d_red:#a53a3a;
@yellow:#e5a82e;
@d_yellow:#bb8210;
@blue:#285ec9;
@d_blue:#163b84;
@green:#59b559;
@d_green:#287528;
@violet:#8243c4;
@d_violet:#58278c;
@sky:#5ec2d2;
@brown:#926834;
@orange:#DF691E;


/*----------------------------------------------*/
/*-------------------- font --------------------*/
/*----------------------------------------------*/
@font-face{
	font-family:'oswald_medium';
	src:url('/fonts/Oswald-Medium.ttf');
}
@font-face{
	font-family:'oswald_bold';
	src:url('/fonts/Oswald-Bold.ttf');
}


/*------------------------------------------------*/
/*-------------------- common --------------------*/
/*------------------------------------------------*/
html, body{
	letter-spacing:0;
}


/*------------------------------------------------*/
/*-------------------- media 1000 ----------------*/
/*------------------------------------------------*/
@media(max-width:1000px){
	.pc{
		display:none !important;
	}
	.sp1000{
		display:block;
	}

	/*---cart_body---*/
	.cart_body{
		display:block;
	}
	.p_table{
		width:100%;
		margin-bottom:30px;
	}
	.cart_sum{
		width:100%;
	}

	/*-------------------------------------------------*/
	/*-------------------- USER_LOGIN -----------------*/
	/*-------------------------------------------------*/
	.user_login{
		padding:0 20px;
		overflow:visible;
		margin:100px auto 0;

		.right_side{
			width:100%;
			padding-bottom:70px;
			overflow:unset;
			
			.card_head{
				margin-bottom:30px;
			}

			.card-body{
				max-width:400px;
				margin:0 auto;
				font-size:16px;
	
				.login_box{
					input{
						padding:12px 10px;
					}
				}
			}
			.member_cancel{
				p{
					font-size:14px;
				}
			}
		}
	}
	/*------------------------------------------------*/
	/*--------------- User_Profile 768px--------------*/
	/*------------------------------------------------*/
	.user_table{
		.left{
			text-align:left;
		}
		.right{
			text-align:right;
		}
		.border{
			background:#eee;
		}
		dl{
			flex-direction:column;
			position:relative;
			align-items: stretch;
		}
		dl:last-child{
			border-bottom:1px solid #eee;
		}
		dt, dd{
			padding:10px;
			display:inline-block;

			span{
				display:inline-block;
			}
		}
		.date_time{
			background:#acd9bf;
		}
		.u_orderid{
			width:100%;
			text-align:left;
		}
		.u_name{
			width:100%;
			height:100px
		}
		.u_price, .u_qty, .u_subtotal{	
			width:100%;
			position:absolute;
			bottom:0
		}
		.u_price{
			left:0;
			text-align:left;
		}
		.u_qty{
			left:50%;
			transform:translateX(-50%);
			text-align:center;
		}
		.u_subtotal{
			right:0;
			text-align:right;
		}
	}


	/*------------------------------------------------*/
	/*-------------------- User_Profile --------------*/
	/*------------------------------------------------*/
	.flex_content{
		width:100%;
		display:block;

		.user_info, .order_history{
			width:100%;
		}
	}

	/*------------------------------------------------*/
	/*-------------------- footer --------------------*/
	/*------------------------------------------------*/
	footer{
		margin-top:50px;
		padding:15px;
		
		.footer_contens{
			gap:15px;

			address{
				font-size:12px;
				grid-column:~"1/3";
				grid-row:~"2/3";

				 > ul{
					gap:20px;
					gap: 0;
					flex-direction:column;
					align-items:flex-start;
				}
			}

			> ul{
				display: flex;
				gap: 0px;
				justify-content:flex-start;
				flex-direction:column;
				align-items:flex-start;
				grid-column:~"1/3";
				grid-row:~"1/2";
			}
	
			small{
				margin-top:15px;
				grid-column:~"1/3";
			}
		}
	}
}
.back_top{
	right:20px;
	display:none;

	a{
		bottom:150px;
	}
}	
/*----------------------------------------------------------------------*/
/*------------------------------ sp-start 768 --------------------------*/
/*----------------------------------------------------------------------*/
@media(max-width:768px){
.pc{
	display:none !important;
}
.table_pc{
	display:none;
}
.sp{
	display:block;
}

body{
	height:100%;
}


/*------------------------------------------------*/
/*-------------------- header --------------------*/
/*------------------------------------------------*/
header{
	height:50px;
}
.header_container{
	/* padding:5px 20px 30px; */
	padding:15px;
	width:100%;

	h1{
		position:absolute;
        left:15px;
        top:50%;
        transform:translateY(-50%);
        max-width:100px;
        z-index:2;

		img{
			width:100%;
		}
	}


	nav{
		width:60%;
	}

	.hamburger_btn{
		svg{
			width:35px;
			height:55px;
		}
	}
}
.right.t_c{
	text-align:center;
}

.header_action{
	display:flex;
	justify-content:center;

	.cart_cnt {
		position:absolute;
		top:22px;
	}

	svg{
		height:25px;
		width:25px;
		margin-top:22px;
	}
	li{
		i{
			font-size:20px;
		}

		ul{
			padding:20px 20px 0;
			right:30px;

			li{

				padding-right:0 !important;
				a{
					font-size:16px;
				}

				a:hover{
					color:#25a058;
					transition:0.3s;
				}
			}
		}
	}
	.login_action{
		ul{
			position:absolute;
			right:20px;
		}
		.login_user{
			right:0;
		}
	}
	li:first-child{
		padding-right:15px
	}
}

.menu_nav{
	width:200px;
	max-width:200px;

	.nav_header{
		height:50px;
	}

	ul{
		li{
			a{
				font-size:14px;
			}
		}

	}


	.close_btn{
		top:15px;
	}
}

.nav_icon{
    gap:35px;
}

.mb_search_area{
	display:none !important;
	background:@white;
	display:grid;
	grid-template-columns:1fr auto;
	padding:10px;
	transition: opacity 0.5s ease;

	label, input{
		height:100%;
	}

	input{
		width:100%;
		padding:5px;
		border:1px solid #575757;
	}

	/* label{
		input{
			width:100%;
    		padding:5px;
		}
	}
	button{
		background:#575757;
    	border:none;
	} */
}
.mb_search_area.active{
	display:grid !important;
}


/*--------------------------------------------------*/
/*-------------------- top_page --------------------*/
/*--------------------------------------------------*/
main{
	margin:50px auto 0;
}

/* .top_container{
	padding:0 20px;
} */

.top_mv{
	margin:50px auto 0;
	/* width:70%; */
	/* height:350px; */

	#name{
		position:absolute;
		left:50%;
		transform:translate(-50%,-50%);
		width:60%;
		padding:0 2vw;

		text{
			font-size:24vw;
		}
	}
	/* #name{
		width:70%;
		padding:0 20px;
	} */
}
.top_concept{
	padding-top:100px;
}

.shop_concept{
	padding:70px 0;
	
	.slick_slide{
		height:280px;

		img{
			object-fit:contain;
		}
		
		.slick-list{
			height:100% !important;
			width:100%;
		}
		.slick-track{
			height:100% !important;
		}
	}
}
.product_page{
	margin:0 20px;
}

.product_view{
	padding:0 15px;
	margin:50px auto 0;

	h2{
		font-size:20px;
		padding-bottom:5px;
	}
	span{
		font-size:11px;
	}

	.wrapper{
		display:block;
		grid-template-columns:unset;
		margin-top:30px;


		h3{
			font-size:13px;
		}

		a{
			margin:15px;
		}
		
		.img_hover{
			height:300px;
		}

		.product_flex:first-child{
			padding-right:0;
			padding-bottom:30px;
		}

		.product_flex:nth-child(2){
			padding-left:0;
		}
	}
	.item_grid{
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		gap:15px;

		a{
			margin:0;
			padding:15px;
			box-sizing:border-box;
		}
	}
}

.product_view---act{
	.order_body{
		margin-top:15px;

		dl{
			flex-direction:column;

			dd{
				
			}
		}
	}
}

/*------------------------------------------------*/
/*-------------------- PRODUCT --------------------*/
/*------------------------------------------------*/

.product_wrapper{
	display:flex;
	flex-direction:column;
	padding:0 15px 0;
	margin-top:80px;

	.product_slider{
		padding-right:0;
		position:unset;
		top:unset;
	}
	.product_intro{
		padding-left:0;
	}
}



.fix_slider{
	position:unset;
} 
.product_content{
	overflow:unset;
	height:unset;
}
.product_slider{
	width:100%;
	margin-bottom:25px;

	.slide{
		height:52.083vw;
	}

	.slide-navigation{
		grid-template-columns:repeat(5, 1fr);
		margin-top:10px;
	}
}

.product_intro{
	width:100%;

	.btn_wrapper{
		.add_cart{
			font-size:14px;
		}
	}
}

.product_box{
	margin:30px 0;

	.option_select{
		select{
			height:40px;
		}
	}
	.intro_flex{
		display:flex;
		align-items:center;
		margin-bottom:20px;
	} 
	.p_price{
		font-size:20px;
		margin-bottom:0;
	}
	
	a{
		font-size:18px;
	}
	.intro_img{
		width:100px;
		margin-right:20px;

		img{
			width:100%;
		}
	} 
}


/*画像選択*/
.multiple_area{
	ul{
		grid-template-columns:repeat(2, 1fr);
		gap:10px;

		li{
			img{
				height: 180px;
			}

			button.product_open{
				right:10px;
				font-size:25px;
				width: 20px;
    			height: 20px;
			}
		}
	}

	/* .order_qty{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		
		.qty{
			width:50px;
			font-size:16px;
			font-weight:bold;
			text-align:center;
			background:none;
			border:none;
		}
		button{
			display:flex;
			justify-content:center;
			align-items:center;
			width:30px;
			height:30px;
			font-size:16px;
			color:@white;
			border-radius:50%;
			border:none;
	
			&.red{
				background-color:@red;
			}
			&.green{
				background-color:@green;
			}
		}
	}*/
	strong{
		font-size: 18px;
	}
}

/*------------------------------------------------*/
/*-------------------- Shop_info -----------------*/
/*------------------------------------------------*/
.shop_page{
	h2{
		margin-bottom:70px;
	}
}

.shop_wrapper{
	/* flex-direction:column; */
	padding:30px 30px 50px;
	margin-bottom:70px;
	grid-template-columns:1fr;

	.shop_flex:last-child{
		margin-top:20px;
	}
}

.btn-primary{
	i{
		display:none;
	}				
}


/*------------------------------------------------*/
/*-------------------- cart_body -----------------*/
/*------------------------------------------------*/
.cart_body{
	display:block;
}
.p_title{
	display:none;
	border-bottom:unset;
}
.p_table{
	width:100%;
	margin-bottom:30px;

	.qty{
		width:90px;
		padding:0;

		button{
			padding:10px;
		}
	}

	input{
		height:35px;
		padding:0;
	}
	.cacl_cart{
		display:inline-block;
	}
}
.p_name{
	display:flex;
	align-items:center;

	a{
		font-size:16px;
		margin-right:20px
	}
	

	.p_img{
		width:125px;
		height:85px;
		margin-right:20px;

		img{
			object-fit:cover;
			width:100%;
			height:100%;
		}
	}
}
.cart_item, .table_item{
	display:table;
    position:relative;
    width:100%;

	td:first-child {
		float:left;
		width:100%;
	}

	td:nth-child(2){
		width:30%;
		float:left;
		text-align:left;
	}

	td:nth-child(3){
		width:33%;
		float:left;
		padding:0 0 10px;
	}

	td:nth-child(4){
		width:36%;
		text-align:right;
		float:left;
	}

	td:nth-child(5){
		position:absolute;
		top:-3px;
		right:0;
		padding:0;
		
		button{
			padding:10px;
		}
	}
}
.cart_sum{
	width:100%;
}


/*------------------------------------------------*/
/*-------------------- order ---------------------*/
/*------------------------------------------------*/
.order_item{
	td{
		span{
			display:inline;
		}
	}
	td:nth-child(3){
		padding:10px 10px 40px
	}
}

.order_sum{
	display:flex;
	justify-content:flex-end;

	td:nth-child(3){
		padding:10px;
		width:150px;
	}
}
.order_form{
	text-align:left;

	li{
		display:flex;
		flex-direction:column;

		.order_input{
			margin-top:10px;

			select{
				margin-bottom:10px;
			}
		}
	}
}


.content_container{
	margin-top:80px;
}

/*------------------------------------------------*/
/*-------------------- 特定商取引法 --------------*/
/*------------------------------------------------*/
.order_body{
	dl{
		flex-direction:column;

		dt{
			width:100%;
		}

		dd{
			width:100%;
			border-left:none;
		}
	}
}
/*------------------------------------------------*/
/*-------------------- ALERTIFY ---------------------*/
/*------------------------------------------------*/

.alertify-logs{
    width:50% !important;
}

/*----------------------.address_add--------------------------*/
.page_body{
	padding:0 20px;
}
.page_address{
	margin:40px 0 20px;
    grid-template-columns:1fr;

	.added_info{
		a{
			position:static;
			text-align:center;
			margin-top:10px;
			display:block;
		}
	}
}
.new_link{
	a{
		width:100%;
	}
}

.address_data{
	.order_form{
		margin:0 20px;
	}

	.order_address_btn{
		margin:30px 20px 50px;
	}
}

.new_address{
	a{
		padding:10px 0;
	}
}
.flex_checkbox{
	display:block;
}
.check_box{
	width:100%;
}
.address_cbox{
	width:fit-content;
	text-align:center;
	margin:30px auto 0;
	padding:45px 51px 45px;
	width:100%;
}


/*-------------------- ブログ一覧 --------------------*/
.blog_container{
	grid-template-columns:1fr;
	grid-gap:15px;
	margin:30px 0 50px;
}

/*---------- ブログ一覧->タグ ----------*/
.tag_section{
	margin-bottom:30px;
}
.tag_header{
	display:block;
	padding:15px 0;

	h3{
		margin:0 0 5px;
		padding:0;
		font-size:20px;
		border:none;
	}
	ul{
		li{
			margin-right:10px;
		}
	}
}


/*-------------------- ブログ記事 --------------------*/
.blog_article_area{
	padding:50px 20px;

	.header{
		margin-bottom:20px;

		time{
			font-size:12px;
		}
		h2{
			font-size:24px;
		}
		ul{
			display:block;

			li{
				display:inline-block;
			}
		}
	}
	.thumbnail{
		margin-bottom:50px;
	}
	.contents{
		p{
			margin-bottom:20px;

			iframe{
				height:250px;
			}
		}
	}
	.footer{
		max-width:200px;

		a{
			padding:5px 10px;
			font-size:12px;
		}
	}
}

.header_center_contens{
	display:flex;
    align-items:center;
    gap:30px;

	.search_area{
		display:none;
	}
	
	p{
		display:none;
	}
}

.search_area{
	border:none !important;
	border-radius:0;

	input{
		border-radius:4px 0 0 4px;
	}

	button{
		border-radius:0 4px 4px 0;
	}
}

.mb_search{
	display:block;
	border:none;
    background:none;
}


.content_container{
	padding:0 15px;
	margin-top:80px;
}

.cucumber{
	padding:15px 15px 0 15px;

	ul{
		li, a{
			font-size:11px;
		}
	}
}
.cucumber.topics{
	padding:15px;
}

.review{
	padding:0 15px;
	margin-top:50px;

	h3{
    	font-size: 16px;
	}

	.stars{
		margin-bottom:10px;
	}
}

.review_average{
	margin-bottom:15px;

	strong{
		font-size:16px;

		span{
			font-size:12px;
		}
	}
}

.review_area{
    padding:15px;

	ul{
		margin-bottom:10px;

		li{
			font-size:13px;
		}
	}

	.text{
		padding:15px;
		font-size:12px;
	}
}

.stars{
	.star {
		font-size:25px;
	}
}

.average_stars{
	font-size:21px;
}

/*------------------------*/
/*---blog article page---*/
/*------------------------*/
/*------ ブログ記事 update 2025-05-28 -------*/
.blog_article_container {
    gap: 30px;
}
.article_container{
	padding:40px 20px;
	font-size:14px;
}
.blog_header{
	padding-bottom:40px;

	time{
		font-size:14px;
	}
	h1{
		font-size:28px;
	}
}
.blog_body{
	padding:40px 0;

	> img{
		width:100%;
		text-align:center;
		display:block;
		margin:0 auto 20px;
	}
}
.blog_container{
	display:grid;
	gap:20px;
}
.blog_row{
	display:grid;
	gap:20px;

	&.col2{
		grid-template-columns:1fr;
	}
	/* &.col3{
		grid-template-columns:1fr;
	}
	&.col4{
		grid-template-columns:1fr;
	} */
}
.blog_column{
	h2{
		padding:5px 0 5px 10px;
		font-size:22px;
	}
	h3{
		padding:3px 0 3px 10px;
		font-size:18px;
	}
	p{
		font-size:14px;
	}
	iframe{
		height:200px;
	}
	hr{
		margin:20px 0;
	}
}
.blog_footer{
	padding-top:40px;

	h2{
		font-size:18px;
	}
}
.related_container{
	gap:10px;

	a{
		flex-direction:column;
		align-items:flex-start;
		gap:3px;
		padding:10px;
		
		time{
			font-size:12px;
		}
		h3{
			font-size:14px;
		}
	}
}

.relate_area{
	.relate_item{
		border:1px solid #d34490;
		margin-bottom:15px;
		padding:0 10px 10px;

		h3{
			margin:10px 0;
		}

		.item{
			padding-right:30px;

			img{
				width:40px;
			}
		}
	}
}
.footer {
	margin-top: 30px;
}
/*---ブログのページ読み込み中---*/
.pager_area{
	padding-bottom:20px;
}

/*-------------------- @media(max-width:768px)->end --------------------*/
}
/*--------------------------------------------------------------------*/
/*------------------------------ sp-end ------------------------------*/
/*--------------------------------------------------------------------*/