@charset "utf-8";
/* 	common.css
======================================================================== */
body{
	font-family: "Noto Sans JP", serif;
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	background:#f9f6e6;
	word-wrap : break-word;
	overflow-wrap : break-word;
	word-break: break-word;
	-webkit-text-size-adjust: 100%;
}
body.open{
	overflow: hidden;
}
* { box-sizing: border-box; }
a,
a:link {
	display: inline-block;
	color:#000000;
	transition: 0.5s;
	text-decoration: none;
}
a:visited,
a:active {
	color:#000000;
}
a:hover {
	text-decoration: none;
	opacity: 0.7;
}
@media screen and (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
		color: inherit!important;
		text-decoration: none!important;
	}
}
p {	line-height: 170%; }
ul,li { list-style: none; }
img {
	width:auto;
	height: auto;
	vertical-align: bottom;
}
.flex{ display: flex;}
.grid{ display: grid;}
.inline{ display: inline-block;}
.sp{ display: none!important;}
@media screen and (max-width: 820px) {
	.tblt_none{
		display: none!important;
	}
}
@media screen and (max-width: 767px) {
	.pc{ display: none!important; }
	.sp{ display: block!important; }
}

:root {
	--color-green: #6fc15a;
	--color-green-light: #e6f5dc;
	--color-green-light2: #c0e8a6;
	--color-yellow: #ffce31;
	--color-yellow-light: #ffffc9;
	--color-beige: #f9f6e6;
	--color-red: #ff3232;
	--contents-space: 20px;
}
@media screen and (max-width: 767px) {
	:root {
	}
}
.font_dm_sans{
	font-family: "DM Sans", sans-serif;
	font-style: normal;
}
.underline {
    background: linear-gradient(transparent 70%, #e6f5dc 0%);
    background: -ms-linear-gradient(transparent 70%, #e6f5dc 0%);
}

/* header --------------------------------------------------*/
#head-area{
	z-index: 999;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.header_top_area{
	width: 100%;
	background: #fff;
	padding: 0 20px;
}
	.header_top_area .inner{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap:20px;
		font-size: 14px;
		font-weight: 500;
		width: 100%;
		max-width: 1100px;
		height: 80px;
		margin:0 auto;
	}
	.header_top_area .logo{
		width: 250px;
	}
		.header_top_area .logo img{
			width: 100%;
		}
	.header_top_area .header_top_right{
		display: flex;
		align-items: center;
		gap: 20px;
	}
		.header_top_area .header_top_right .shipping{
			color: var(--color-green);
		}
		.header_top_area .header_top_right .flex_search_links{
			align-items: center;
			gap: 15px;
			margin-top: 5px;
		}
			.searchform {
				display: flex;
				align-items: center;
				max-width: 250px;
				border-radius: 100px;
				border: 1px solid #e4e4e4;
				overflow: hidden;
			}
				.searchform label {
					width: 100%;
					max-width: 200px;
				}
					.searchform input {
						letter-spacing: 1px;
						width: 100%;
						height: 34px;
						border: none;
						background: #f6f6f6;
						outline: none;
						padding: 1px 15px 0;
					}
						.searchform input::placeholder {
							color: #c8c8c8;
						}
				.searchform button {
					display: flex;
					justify-content: center;
					align-items: center;
					justify-content: center;
					color: #fff;
					letter-spacing: 1px;
					width: 50px;
					height: 34px;
					border: none;
					background: var(--color-green);
					padding-top: 2px;
					cursor: pointer;
				}
		.header_top_area .header_top_right .flex_search_links .links{
			display: flex;
			gap:20px;
		}
			.header_top_area .header_top_right .flex_search_links .links a{
				position: relative;
				padding: 1px 0 2px;
			}
				.header_top_area .header_top_right .flex_search_links .links a + a::before{
					content: '';
					position: absolute;
					top: 0;
					left: -10px;
					height: 100%;
					width: 2px;
					border-radius: 3px;
					background: #e4e4e4;
				}
		.header_contact_wrap{
			display: flex;
			gap:2px;
			border-radius: 15px;
			overflow: hidden;
		}
			.header_contact_wrap a.tel,
			.header_contact_wrap a.mail{
				display: flex;
				align-items: center;
				justify-content: center;
				flex:1;
				font-weight: 700;
				color: #606060;
				line-height: 130%;
				text-align: center;
				background: var(--color-yellow);
				width: 166px;
				height: 56px
			}
				.header_contact_wrap a.tel{
					font-size: 16px;
					letter-spacing: 1px;
				}
					.header_contact_wrap a.tel img{
						margin-right: 4px;
					}
				.header_contact_wrap a.mail{
				}

.pc_navi {
	background: var(--color-beige);
	padding: 8px 20px;
}
	.pc_navi ul {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap:6px;
		width: 100%;
	}
		.pc_navi ul li{
			width: 100%;
			max-width: 140px;
		}
		.pc_navi ul li a{
			display: flex;
			align-items: center;
			gap:5px;
			font-size: 12px;
			font-weight: 600;
			line-height: 130%;
			border-radius: 5px;
			background: #fff;
			overflow: hidden;

		}
			.pc_navi ul li a img{
				width: 100%;
				max-width: 45px;
			}

#nav-toggle {
	display: none;
}
#global-nav{
}

/* PC スクロール後の固定ヘッダー ------------*/
.moved#head-area #global-nav{
	position: fixed;
	top: 0;
	left: 0;
	animation: NaviFadeDown 500ms ease-out;
	width: 100%;
}
	.moved#head-area #global-nav .pc_navi{
		background: #fff;
	}
@keyframes NaviFadeDown {
	  0% { top: -70px;}
	100% { top: 0!important;}
}
/*--------------------------------------*/

.wrap{
	margin-top: 163px;
}
.wrap.page_top{
	margin-top: 138px;
}
#head-area .sp_navi{
	display: none;
}
@media screen and (max-width: 1362px) {
	.pc_navi ul li{
		max-width: 110px;
	}
	.pc_navi ul li a{
		font-size: 10px;
	}
		.pc_navi ul li a img{
			max-width: 32px;
		}
	.wrap{
		margin-top: 151px;
	}
	.wrap.page_top{
		margin-top: 126px;
	}
}
@media screen and (max-width: 1100px) {
	.header_top_area{
		position: relative;
		z-index: 999;
		justify-content: flex-start;
		height: 72px;
		border-bottom: 2px solid #f6f6f6;
		padding: 0 0 0 15px;
	}
	.header_top_area .inner{
		height: 70px;
	}
		.header_top_area .logo {
			/*width: 190px;*/
			width: 155px;
		}
		.header_top_area .header_top_right{
			display: none;
		}

	#head-area .pc_navi{
		display: none;
	}
	#head-area .sp_navi{
		display: block;
	}
	#head-area {
		z-index: 1000;
		position: fixed;
		top: 0;
		left: 0;
	}
	/* nav-toggle------ */
	#nav-toggle {
		display: block;
		position: absolute;
	  	z-index: 1000;
		top: 13px;
		right: 13px;
		cursor: pointer;
		width: 45px;
		height: 45px;
		background: var(--color-green);
		text-align: center;
		border-radius: 6px;
	}
	#nav-toggle span.caption {
		position: absolute;
		top: 8px;
		left: 0;
		display: block;
		font-size: 10px;
		font-weight: 700;
		color: #fff;
		width: 100%;
	}
	#nav-toggle > div {
		position: relative;
		width: 30px;
		margin: 0 auto;
	}
	#nav-toggle div span {
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		background: #fff;
		transition: top .5s ease, -webkit-transform .6s ease-in-out;
		transition: transform .6s ease-in-out, top .5s ease;
		transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
	}
	#nav-toggle div span:nth-child(1) { top: 22px;}
	#nav-toggle div span:nth-child(2) { top: 29px;}
	#nav-toggle div span:nth-child(3) {	top: 36px;}

	.open #nav-toggle div span:nth-child(1) {
		top: 30px;
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg);
	}
	.open #nav-toggle div span:nth-child(2) {
		width: 0;
	}
	.open #nav-toggle div span:nth-child(3) {
		top: 30px;
		-webkit-transform: rotate(-30deg);
		transform: rotate(-30deg);
	}
	/* nav-toggle------ */

	#global-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		text-align: center;
		visibility: hidden;
		background: #fff;
		opacity: 0;
		border-top: 1px solid #d4d4d4;
		margin-top: 72px;
		padding: 25px 20px 30px;
		overflow-y: scroll;
	}
	#global-nav .sp_navi {
		text-align: left;
	}
	#global-nav .sp_navi .sp_navi_inner{
	}
	.searchform {
		max-width: 100%;
		width: 90%;
		margin: 0 auto 25px;
	}
		.searchform label {
			width: 100%;
			max-width: 100%;
		}
		.searchform input {
		    background: #fff;
		}

	.sp_navi ul.links_cat {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap:18px;
		width: 100%;
		margin-bottom: 25px;
	}
		.sp_navi ul.links_cat li{
			width: calc(50% - 9px);
		}
			.sp_navi ul.links_cat li a{
				display: flex;
				align-items: center;
				gap:5px;
				font-size: 13px;
				font-weight: 600;
				line-height: 140%;
				border-radius: 5px;
				background: #fff;
				overflow: hidden;
			}
				.sp_navi ul.links_cat li a img{
					width: 100%;
					max-width: 50px;
				}

	#global-nav .sp_navi .sp_nav_title {
		position: relative;
		font-size: 16px;
		font-weight: bold;
		color: var(--color-green);
		text-align: center;
		margin-bottom: 25px;
	}
		#global-nav .sp_navi .sp_nav_title::after {
			content: '';
			position: absolute;
			top: 8px;
			left: 0;
			width: 100%;
			height: 1px;
			background: var(--color-green);
		}
			#global-nav .sp_navi .sp_nav_title span{
				position: relative;
				z-index: 1;
				display: inline-block;
				background: var(--color-beige);
				padding: 0 20px;
			}

	.sp_navi .block  {
		margin-bottom: 30px;
	}
		.sp_navi .block .flex {
			flex-wrap: wrap;
			border: 1px solid #e4e4e4;
			background: #e4e4e4;
			gap: 1px;
		}
			.sp_navi .block .flex a{
				display: flex;
				align-items: center;
				font-size: 14px;
				font-weight: 500;
				line-height: 120%;
				letter-spacing: 1px;
				height: 50px;
				width: 100%;
				background: #fff;
				padding-left: 20px;
			}
			.sp_navi .block .flex a.col2{
				width: calc(50% - 0.5px);
			}
			.sp_navi .block .flex a svg{
				margin-right: 20px;
			}

	.sp_navi .guide {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		font-weight: 500;
		height: 80px;
		max-width: 500px;
		background: #fff;
		border-radius: 8px;
		gap: 15px;
		margin: 0 auto 30px;
	}
		.sp_navi .guide span{
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 42px;
			height: 42px;
			background: #f6f6f6;
			border-radius: 100px;
		}
			.sp_navi .guide span img{
				width: 40px;
			}
	.sp_navi .bn_buyer {
		display: block;
		width: 100%;
		max-width: 500px;
		margin: 0 auto 30px;
	}
		.sp_navi .bn_buyer img{
			width: 100%;
		}
	.sp_navi .links{
		max-width: 500px;
		margin: 0 auto 30px;
	}
		.sp_navi .links a{
			display: flex;
			align-items: center;
			width: 100%;
			font-size: 14px;
			font-weight: 500;
			color:#333333;
			padding-left: 20px;
		}
		.sp_navi .links a + a{
			margin-top: 25px;
		}
			.sp_navi .links a svg{
				margin-right: 20px;
			}
	.sp_navi .contact{
		color: #606060;
		text-align: center;
		background: var(--color-yellow);
		border-radius: 12px;
		max-width: 500px;
		margin: 0 auto 25px;
		padding: 30px 20px;
	}
		.sp_navi .contact .title{
			font-size: 18px;
			font-weight: 700;
			line-height: 140%;
			margin-bottom: 25px;
		}
		.sp_navi .contact a{
			position: relative;
			display: flex;
			align-items: center;
			gap:10px;
			font-size: 15px;
			font-weight: 700;
			color: #606060;
			letter-spacing: 1px;
			max-width: 214px;
			margin: 0 auto;
			padding: 0 5px;
		}
			.sp_navi .contact a + a{
				margin-top: 15px;
			}
			.sp_navi .contact a.mailform,
			.sp_navi .contact a.sample{
				font-size: 14px;
				border-radius: 100px;
				background: #fff;
				padding: 6px;
			}
			.sp_navi .contact a.font_dm_sans{
				font-size: 18px;
				line-height: 1;
			}
			.sp_navi .contact a .arrow{
				position: absolute;
				top: calc(50% - 5px);
				right: 15px;
			}
	.sp_navi a.mail{
		position: relative;
		display: flex;
		align-items: center;
		gap:10px;
		font-size: 15px;
		font-weight: 700;
		color: #606060;
		letter-spacing: 1px;
		max-width: 214px;
		margin: 0 auto;
		border-radius: 100px;
		padding: 6px;
	}



	/* open */
	.open {
	}
	.open body{
		overflow: hidden;
	}
	.open .moved#head-area #global-nav{
		animation: none;
	}
	.open #global-nav {
		transition: opacity .6s ease, visibility .6s ease;	
		visibility: visible;
		opacity: 1;
		background: var(--color-beige);
	}
	.open #global-nav li {
	  opacity: 1;
	}
		.open #head-area > .inner {
			padding: 0;
		}
	.wrap{
		z-index: 900;
		margin-top: 82px;
	}
	.wrap.page_top{
		z-index: 900;
		margin-top: 72px;
	}
}
@media screen and (max-width: 767px) {
	#head-area .sp.tel{
		position: absolute;
		top: 21px;
		right: 163px;
		z-index: 1000;
	}
	#head-area .sp.mail{
		position: absolute;
		top: 21px;
		right: 123px;
		z-index: 1000;
	}
	#head-area .sp.estimate{
		position: absolute;
		top: 13px;
		right: 68px;
		z-index: 1000;
		display: flex!important;
		align-items: center;
		justify-content: center;
		font-size: 10px;
		font-weight: 500;
		color: #606060;
		line-height: 1.5;
		text-align: center;
		width: 45px;
		height: 45px;
		background: var(--color-yellow);
		border-radius: 5px;
	}
	.wrap {
		z-index: 900;
		margin-top: 72px;
	}
}

/* Bread crumbs ---------------------------*/
.breadcrumbs_wrap{
	margin-bottom: 25px;
}
	.breadcrumbs {
		font-size: 12px;
		line-height: 130%;
		width: 100%;
	}
		.breadcrumbs .current-item{
			color: #333333;
		}
		.breadcrumbs .split{
			margin: 0 8px;
		}
@media screen and (max-width: 767px) {
	.breadcrumbs_wrap{
		margin-top: 5px;
		margin-bottom: 20px;
	}
		.breadcrumbs {
			font-size: 11px;

		    overflow-x: scroll;
		    word-break: keep-all;
		    white-space: nowrap;
			padding-bottom: 8px;
		}
		.breadcrumbs .split{
			margin: 0 8px;
		}
}

/* pagetop ------------------------------------------*/
.pagetop{
	display: none;
}
.pagetop a{
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
	width: 40px;
	height: 40px;
	background: var(--color-green);
	border-radius: 100%;
	border: 1px solid #fff;
}
.pagetop a span{
	position: relative;
	top: 4px;
	display: inline-block;
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: rotate(45deg);
}
.pagetop_single a{
	bottom: 90px;
}
@media screen and (max-width: 1300px) {
	.pagetop a{
		bottom: 4px;
		right: 10px;
		bottom: 55px;
	}
	.pagetop_single a{
		bottom: 90px;
	}
}
@media screen and (max-width: 767px) {
	.pagetop_single a{
		bottom: 110px;
	}
}
/* fixed_cta_common --------------------------------------*/
.fixed_cta_common{
	display: none;
	padding: 0!important;
}
	.fixed_cta_common .flex{
		display: none;
	}
@media screen and (max-width: 1300px) {
	.fixed_cta_common{
		width: calc(100% - 60px)!important;
		width: 100%!important;
		margin-right: auto;
	}
	.fixed_cta_common .flex{
		display: flex;
		/*gap:2px;*/
		max-width: 500px;
		margin: 0 auto;
		border-radius: 5px 5px 0 0;
		/*overflow: hidden;*/
	}
		.fixed_cta_common .flex a{
			position: relative;
			flex:1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 13px;
			font-weight: 500;
			color: #606060;
			text-align: center;
			line-height: 1.3;
			width: 100%;
			height: 50px;
			background: var(--color-yellow);
			padding: 0;
		}
		.fixed_cta_common .flex a:first-child{
			border-right: 1px solid #fff;
		}
		.fixed_cta_common .flex a:last-child{
			border-left: 1px solid #fff;
		}
			.fixed_cta_common .flex a img{
				margin-right: 8px;
			}
}

.fixed_cta_common_pc{
	display: none;
}
.fixed_cta_common_pc .inner{
	position: fixed;
	top: 20%;
	right: 0;
	z-index: 999;
}
.fixed_cta_common_pc a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	font-size: 14px;
  	font-weight: 700;
	color: #606060;
	letter-spacing: 1px;
  	writing-mode: vertical-rl;
	background: var(--color-yellow);
	border-radius: 10px 0 0 10px;
	padding: 15px 0;
}
.fixed_cta_common_pc a + a{
	margin-top: 5px;
}
@media screen and (max-width: 1300px) {
	.fixed_cta_common_pc .inner{
		display: none;
	}
}


/* footer ------------------------------------------*/
footer {
	text-align: center;
	color: #fff;
	background: var(--color-green);
	margin-top: 80px;
}
footer .links_l{
	display: flex;
	justify-content: center;
	background: #fff;
	padding: 25px;
}
	footer .links_l a{
		font-size: 15px;
		color: var(--color-green);
		letter-spacing: 1px;
		padding: 0 25px;
	}
	footer .links_l a + a{
		border-left: 1px solid var(--color-green);
	}
footer .inner{
	padding: 85px 20px;
}
	footer .links{
		display: flex;
		gap:15px;
		font-size: 12px;
		font-weight: 500;
		max-width: 900px;
		margin:0 auto 65px;
	}
		footer .links .flex_item{
			flex:1;
			text-align: left;
			letter-spacing: 1px;
			line-height: 120%;
		}
		footer .links a{
			color: #fff;
		}
		footer .links ul + ul{
			margin-top: 45px;
		}
			footer .links ul li.parent {
				font-size: 16px;
				font-weight: 700;
			}
			footer .links ul li + li{
				margin-top: 16px;
			}
			footer .links ul li a{
				position: relative;
				line-height: 120%;
				padding-left: 15px;
			}
				footer .links ul li a::before{
					content: '';
					position: absolute;
					top: 2px;
					left: 0px;
					width: 6px;
					height: 11px;
					background-image: url(../../img/common/arrow_white.svg);
					background-repeat: no-repeat;
					background-size: contain;
				}
				footer .links ul li.parent a::before{
					top: 4px;
				}

	footer .bn_area {
		display: flex;
		justify-content: center;
		gap:10px;
		margin-bottom: 60px;
	}
		footer .bn_area img{
			width: 100%;
			max-width: 200px;
		}
	footer .site_description{
		font-size: 14px;
		margin-bottom: 25px;
	}
	footer .footer_logo{
		margin-bottom: 25px;
	}
	footer .address_info{
		font-size: 14px;
		letter-spacing: 1px;
		line-height: 120%;
		margin-bottom: 60px;
	}
		footer .address_info .address{
			margin-bottom: 10px;
		}
			footer .address_info a{
				color: #fff;
			}
		footer .address_info span{
			display: inline-block;
			margin-bottom: 8px
		}
	footer .company {
		margin-bottom: 28px;
	}
		footer .company p{
			font-size: 14px;
			letter-spacing: 1px;
			margin-bottom: 15px;
		}
		footer .company a{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			color: var(--color-green);
			letter-spacing: 1px;
			width: 100%;
			max-width: 330px;
			height: 60px;
			background: #fff;
			border-radius: 100px;
			margin: 0 auto;
		}
			footer .company a img{
				position: absolute;
				top: calc(50% - 7px);
				right: 25px;
			}
	footer .copyright{
		font-size: 11px;
		letter-spacing: 1px;
	}
@media screen and (max-width: 767px) {
	footer {
		margin-top: 50px;
	}
	footer .links_l{
		flex-wrap: wrap;
		gap:25px 30px;
		padding: 25px;
	}
		footer .links_l a{
			font-size: 14px;
			letter-spacing: 0;
			padding: 0;
		}
		footer .links_l a + a{
			border-left: none;
		}
	footer .inner{
		padding: 50px 20px;
	}
		footer .links{
			display: flex;
			flex-wrap: wrap;
			gap:0;
			font-size: 13px;
			font-weight: 500;
			max-width: 900px;
			margin:0 auto 40px;
		}
			footer .links .flex_item{
				flex:inherit;
				width: 100%;
			}
			footer .links .flex_item + .flex_item{
				margin-top: 30px;
			}
			footer .links ul + ul{
				margin-top: 30px;
			}
				footer .links ul li.parent {
					font-size: 15px;
					font-weight: 700;
				}
				footer .links ul li + li{
					margin-top: 18px;
				}
					footer .links ul li.parent a::before{
						top: 3px;
					}

		footer .bn_area {
			flex-wrap: wrap;
			gap:12px;
			margin-bottom: 40px;
		}
			footer .bn_area a {
				width: calc(50% - 6px);
			}
		footer .site_description{
			font-size: 14px;
			margin-bottom: 14px;
		}
		footer .footer_logo {
			width: 100%;
			margin-bottom: 30px;
		}
			footer .footer_logo img{
				width: 100%;
				max-width: 300px;
			}
		footer .address_info{
			margin-bottom: 40px;
		}
		footer .company {
			margin-bottom: 28px;
		}
			footer .company p{
				font-size: 13px;
				margin-bottom: 15px;
			}
			footer .company a{
				max-width: 330px;
				height: 54px;
			}
				footer .company a img{
					position: absolute;
					top: calc(50% - 7px);
					right: 25px;
				}
}